伪元素 实现垂直居中

主要使用display:inline-block、vertical-align:middle实现垂直居中效果

<div class="box1">
  <div class="box2"></div>
</div>

.box1 {
    width: 400px;
    height: 400px;
    border: 1px solid red;
    text-align: center;
}
.box2 {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    display: inline-block;
    vertical-align: middle;
}
.box1:before,
.box1:after {
    content: '';
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}