1、高度为百分比，line-height 不知道设置具体的数值的情况，利用伪元素进行居中
HTML
<div class='father'>
<div class="son">这是要居中的文字</div>
</div>
CSS 给要居中元素设置一个伪元素
.son{
height: 50%;
background: blue;
color: #fff;
}
.son::before{
display: inline-block;
content: "";
height: 100%;
vertical-align: middle;
}
伪元素文字垂直居中
2、高度为具体的数值的情况，line-height 只需要设置具体的高度即可
HTML
<div class='father'>
<div class="son">这是要居中的文字</div>
</div>
CSS
.son{
height: 100px;
background: blue;
line-height: 100px;
color: #fff;
}
3、利用表格和单元格的特性，让文字垂直居中
HTML
<div class='father'>
<div class="son">这是要居中的文字</div>
</div>
CSS
.son {
display: table-cell;
height: 100px;
background: blue;
color: #fff;
vertical-align: middle;
}
