CSS 文字垂直居中

1、高度为百分比,line-height 不知道设置具体的数值的情况,利用伪元素进行居中

HTML

    
这是要居中的文字

CSS 给要居中元素设置一个伪元素

        .son{
            height: 50%;
            background: blue;
            color: #fff;
        }

        .son::before{
            display: inline-block;
            content: "";
            height: 100%;
            vertical-align: middle;
        }
伪元素文字垂直居中

2、高度为具体的数值的情况,line-height 只需要设置具体的高度即可

HTML

    
这是要居中的文字

CSS

        .son{
            height: 100px;
            background: blue;
            line-height: 100px;
            color: #fff;
        }

3、利用表格和单元格的特性,让文字垂直居中

HTML

    
这是要居中的文字

CSS

        .son {
            display: table-cell;
            height: 100px;
            background: blue;
            color: #fff;
            vertical-align: middle;
        }

你可能感兴趣的:(CSS 文字垂直居中)