<div class="parent">
<div class="item"></div>
</div>
-
已知元素的宽度和高度:
.item {
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -75px;
}
.item {
position: absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;
} - 未知元素的高度和宽度:
.item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); / 使用css3的transform来实现 /
}
.parent {
display: flex;
justify-content:center;
align-items: center;
background: #AAA;
height: 300px; / 注意这里需要设置高度来查看垂直居中效果 /
}