display:box、display:flex实现多行文本垂直居中

统一的样式

文字水平居中text-align: center;

.box{
    height: 200px;
    width: 200px;
    background-color: #DDDDDD;
    text-align: center;
    margin: 20px; 
    padding: 0 20px;
}

1、单行文本垂直居中

设置行高line-height 和父元素相同

    .box-sigle{
        line-height: 200px;
    }  

    
单行

    单行文本

2、多行文本垂直居中table

使用display: table; 垂直居中

    .box-more-table{
        display: table;
    }

    .box-more-table p{
        display: table-cell;
        vertical-align: middle;
    }


多行 table

    多行文本, 多行文本, 多行文本, 多行文本, 多行文本, 多行文本

3、多行文本垂直居中flex

使用display: flex; 垂直居中

    .box-more-flex{
        display: flex;
        align-items: center;
    }  


多行 flex

    多行文本, 多行文本, 多行文本, 多行文本, 多行文本, 多行文本

总结

1、块元素垂直居中问题采用 flex 解决。

2、行内元素垂直居中问题解决如下：

1）单行

该元素 css 属性 line-height 的值与该元素的父级元素 css 属性 height 一致即可。

2）多行

设置该元素 css 属性：display: table-cell; vertical-align: middle;， 还需设置该元素的父级元素 css 属性：display: table;。