固定高的块多行文字垂直居中的几种解决方案

单行文本垂直居中的方法很简单，就是设置line-height与外部块的高度一致即可。如果在一个高度固定的块内，如何让多行或者单行文字垂直居中显示。网上可以搜到很多方法，这里想做一个简单的总结，方便以后查看。

一、 line-height

　　多行文字也是可以使用line-height实现垂直居中的。

.test1{ font-size:0;width:200px;line-height:200px;background:#eee;}
.test1 span{ font-size:12px;display:inline-block;vertical-align:middle;line-height:1.4;}
.test1 i{width:0;display:inline-block;font-size:1px;line-height:200px;}

<div class="test1">
     <span> 这是啥这是啥 这是啥这是啥 这是啥这是啥 这是啥这是啥 
     　　<br />这是啥这是啥
　　　</span>
     <i>&nbsp;</i>
</div>

外部div块固定宽，使用ling-height 设置高度，font-size 设为0。内部的文字用span标签包裹起来，设置为行内块 display:inline-block; 。

i 标签同样设置为行内块，此时i标签内部的字体大小不能为0，如果为0的话在ie10,ie11下会撑不开div的高度，并不知道为什么。。

最后效果图：

该方法可以兼容的IE6，IE7.

二、table-cell

css属性 display:table-cell; 设置了display:table-cell的标签就相当如td标签，td标签是表哥单元格，这时就可以使用vertical-align:middle；设置居中了。

<html>
<head>
    <style>
        .box{width:200px;height:200px;display:table-cell;vertical-align:middle;border:1px dotted #ccc;font-size:0;}
        .box span{display:inline-block;font-size:14px;padding:0 5px;}
    </style>
</head>
<body>
    <div class="box">
        <span>使用display：tabel-cell实现多行文字垂直居中...</span>
    </div>
</body>
</html>

该方法是不兼容IE6、IE7的，因为IE6、IE7不认识table-cell。

三、flex布局

<html>
<head>
    <style>
        .box{display:flex;display:-ms-flexbox;width:200px;height:200px;border:1px dotted #ccc;justify-content:center;align-items:center;}
        .box span{display:inline-block;width:100%;padding:5px;}
    </style>
</head>
<body>
    <div class="box">
        <span>使用flex布局实现多行文字垂直居中</span>
    </div>
</body>
</html>

flex布局的兼容性就没有前两个那么好了，该方法在IE9以下均不支持。

　　如果对兼容性没有特别大的要求的话，使用table-cell是最方便的办法了。文章中可能会有不对的地方，欢迎指正！

固定高的块多行文字垂直居中的几种解决方案

猜你喜欢