1、高度為百分比，line-height 不知道設置具體的數(shù)值的情況残腌，利用偽元素進行居中
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烁登、高度為具體的數(shù)值的情況，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;
}
