2021-05-11 多行文本垂直居中的三种方法

总结:

实现多行文本居中需要将其转化成其他的形式

方法一:子元素设置table-cell来模拟表格

        .box {
            width: 300px;
            height: 400px;
            border: dashed;
            
            display: table-cell;
            vertical-align: middle;
        }

或者:父元素设置display:table;子元素设置display:table-cell

        .wrap {
            display: table;
        }  
        .box {
            height: 400px;
            display: table-cell;
            vertical-align: middle;
        }

方法二:设置display:inline-block来模拟单行文本

        .wrap {
            width: 300px;
            height: 400px;
            border: solid;
            
            margin-top: 20px;
            line-height: 400px;
        }
        
        .box {
            line-height: 20px;
            display: inline-block;
            vertical-align: middle;
        }

或者给子元素添加一个空的兄弟盒子作为baseline的参考

css:

        .wrap{
            width: 200px;
            height: 250px;
            background: wheat;
        }
        .box{
            display: inline-block;
            width: 100%;
            vertical-align: middle;
        }
        span{
            display: inline-block;
            width: 0;
            height: 100%;
            vertical-align: middle;
        }

html:

    <div class="wrap">
        <!-- 注意此处span标签不能换行写 -->
        <div class="box">我是多行文本我是多行文本
     		   我是多行文本我是多行文本 我是多行文本
     		   我是多行文本 我是多行文本我是多行文本
      		  我是多行文本</div><span></span>
    </div>
```

方法三:设置定位脱离文档流

        .wrap {
            width: 300px;
            height: 100px;
            border: double;
            position: relative;
        }
        
        .box {
            position: absolute;
            top: 50%;
            /*31是.box此时其高度的一半*/
            margin-top: -31px;
        }