利用table特性，模拟水平垂直居中 查看在线demo
<!-- html code-->
<div class="wrapper-table">
<div class="item-table">
<div>这里模拟 table 来水平垂直居中元素 </div>
兼容IE8+
</div>
</div>
/*css code*/
.wrapper-table{
display:table;
width:100%; /*根据实际情况调整*/
height:100%;/*根据实际情况调整*/
}
.item-table{
display:table-cell;
vertical-align: middle; /*让子元素垂直居中*/
text-align: center; /*让子元素水平居中*/
}
利用伪元素 查看在线demo
<!-- html code -->
<div class="block">
<div class="centered">
<div>这里利用伪元素 来水平垂直居中元素 </div>
兼容IE9+
</div>
</div>
/*css code*/
.block {
text-align: center;
height: 100%; /*根据实际情况调整*/
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
