水平垂直居中 兼容 IE

利用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;
}