html内容:
<div class="box">
<div class="con"></div>
</div>
CSS内容:
方法一:text-align: center; vertical-align: middle;
.box {
border:1px solid red;
width:500px;
height:200px;
line-height:200px;
text-align: center;
}
.con {
border:1px solid green;
width:50px;
height:50px;
display:inline-block;
vertical-align: middle;
}
方法二:知道子标签宽高的条件下,使用 margin-top:height/2; margin-left: -width/2;
.box {
border:1px solid red;
width:500px;
height:200px;
position:relative;
}
.con {
border:1px solid green;
width:50px;
height:50px;
position:absolute;
left:50%;
top:50%;
margin-top:-25px;
margin-left: -25px;
}
方法三:不知道子标签宽高的条件下,使用transform: translate(-50%, -50%);
.box {
border:1px solid red;
width:500px;
height:200px;
position:relative;
}
.con {
border:1px solid green;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}