CSS实现垂直居中的4种思路详解

 行高line-height实现单行文本垂直居中

以前一直认为单行文本垂直居中要将高度和行高设置成相同的值，但高度其实没必要设置。实际上，文本本身就在一行中居中显示。在不设置高度的情况下，行高撑开高度。

<style>
.test{
    line-height: 50px;
    background-color: lightblue;
}    
</style>
<div class="test">测试文字</div>

设置vertical-align:middle实现垂直居中