感谢Apple总结提供
第一种子盒子是有高度的,其它是子盒子没有高度
.one{
position:relative;
width:400px;
height:400px;
border:1px solid red;
margin:0 auto;
}
.oneImg{
position:absolute;
left:50%;
top:50%;
margin-top:-130px;
margin-left:-130px;
width:260px;
height:260px;
border:1px solid green;
}
.two{
position:relative;
width:350px;
height:350px;
border:1px solid blue;
margin:0 auto;
}
.twoImg{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
.three{
position:relative;
width:350px;
height:350px;
border:1px solid blue;
margin:0 auto;
}
.threeImg{
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
transform:translate( -50%, -50%);
}
.four{
width:350px;
height:350px;
line-height:350px;
border:1px solid blue;
text-align:center;
margin:0 auto;
}
.fourImg{
vertical-align:middle;
}
如果想让父盒子里面的子元素垂直水平居中,就给父盒子设置:
align-items:center;
justify-content:center;