1、高度为百分比,line-height不知道设置具体数值的情况下,利用伪元素来进行居中
<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 只需要设置具体的高度即可
3、利用表格和单元格的特性,让文字垂直居中
.son {
display: table-cell;
height: 100px;
background: blue;
color: #fff;
vertical-align: middle;
}