- absulute + margin/translate
<div class="father">
000
<div class="son">
111
</div>
</div>
.father
{
width:600px;
height:400px;
position:relative;
background-color:#f60;
}
.son
{
position:absolute;
width:200px;
height:200px;
background-color:#999;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
/*transform:translate(-50%,-50%); 无需固定的宽高*/
}
效果图
- absolute + margin auto
.son
{
position:absolute;
width:200px;
height:200px;
background-color:#999;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
}
效果同上。
- :before + inline-block + vertical-align
<div class="father">
<div class="son">
111
</div>
<div class="son">
111
</div>
<div class="son">
111
</div>
</div>
.father
{
width:600px;
height:400px;
text-align:center; /*水平居中*/
background-color:#f60;
}
.father::before{
content:'.';
height:100%; /*400px*/
width:0;
display:inline-block;
vertical-align:middle; /*垂直居中*/
overflow:hidden;
text-indent:9999px;
}
.son
{
width:100px;
height:200px;
background-color:#999;
display:inline-block;
vertical-align:middle;
}
效果图