CSS 文字垂直居中

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;
        }