固定容器高度的多行文字垂直居中

Posted 2020-10-04 javenLee

思路：把文字用span包裹起来，设置为inline-block，相当于图片img的属性。父div用table-cell的样式，用vertical-align:middle实习上下居中

<div class="box">
            <span>多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中</span>
</div>

.box{width:400px;height:500px;border: 3px solid #333;padding: 0 10px;display:table-cell;vertical-align:middle;}
.box span{display: inline-block;}

使用这方法需要注意的一点是外部div不能使用浮动或者绝对定位。