單行文本垂直居中的方法很簡單，就是設置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是最方便的辦法了。文章中可能會有不對的地方，歡迎指正！