方式一:利用绝对定位解决
HTML代码:
<div class="father">
<div class="son">
<span>我是span</span>
</div>
</div
CSS代码:
*{
margin: 0;
padding: 0;
}
.father{
position: relative;
width: 500px;
height: 500px;
margin: 50px auto;
background-color: pink;
}
.father .son{
position: absolute;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
width: 200px;
height: 200px;
background-color: green;
text-align: center;
line-height: 200px;
}
方式二:对定位的子盒子用2D转换(transform中的translate参数是%的话,移动的距离是盒子自身宽度或者高度来对比的)
HTML代码:
<div class="father">
<div class="son">
<span>我是span</span>
</div>
</div>
CSS代码:
*{
margin: 0;
padding: 0;
}
.father{
position: relative;
width: 500px;
height: 500px;
margin: 50px auto;
background-color: pink;
}
.father .son{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
background-color: green;
text-align: center;
line-height: 200px;
}
效果图如下:(行内和行内块用text-align和line-height就好了)