固定高的块多行文字垂直居中的几种解决方案
单行文本垂直居中的方法很简单，就是设置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> </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是最方便的办法了。文章中可能会有不对的地方，欢迎指正！
