單行文字垂直居中的方法很簡單，就是設定line-height與外部塊的高度一致即可。如果在乙個高度固定的塊內，如何讓多行或者單行文字垂直居中顯示。網上可以搜到很多方法，這裡想做乙個簡單的總結，方便以後檢視。
一、 line-height
多行文字也是可以使用line-height實現垂直居中的。
.test1.test1 span.test1 i
<外部div塊固定寬，使用ling-height 設定高度，font-size 設為0。內部的文字用span標籤包裹起來，設定為行內塊 display:inline-block; 。div
class
="test1"
>
<
span
>
這是啥這是啥 這是啥這是啥 這是啥這是啥 這是啥這是啥
<
br />這是啥這是啥
span
>
<
i> i
>
div>
i 標籤同樣設定為行內塊，此時i標籤內部的字型大小不能為0，如果為0的話在ie10,ie11下會撐不開div的高度，並不知道為什麼。。
最後效果圖：
該方法可以相容的ie6，ie7.
二、table-cell
css屬性 display:table-cell; 設定了display:table-cell的標籤就相當如td標籤，td標籤是表哥單元格，這時就可以使用vertical-align:middle；設定居中了。
<該方法是不相容ie6、ie7的，因為ie6、ie7不認識table-cell。html
>
<
head
>
<
style
>
.box
.box span
style
>
head
>
<
body
>
<
div
class
="box"
>
<
span
>使用display：tabel-cell實現多行文字垂直居中...
span
>
div>
body
>
html
>
三、flex布局
<flex布局的相容性就沒有前兩個那麼好了，該方法在ie9以下均不支援。html
>
<
head
>
<
style
>
.box
.box span
style
>
head
>
<
body
>
<
div
class
="box"
>
<
span
>使用flex布局實現多行文字垂直居中
span
>
div>
body
>
html
>
如果對相容性沒有特別大的要求的話，使用table-cell是最方便的辦法了。文章中可能會有不對的地方，歡迎指正！
大小不固定，多行文字的垂直居中
單行文字 可能很多人都知道如何讓單行文字垂直居中顯示，就是使用line height，將line height值與外部標籤盒子的高度值設定成一致就可以了。例如如下css height 3em line height 3em line height 40px height 40px 多行文字 如何實現...
多行文字的垂直居中
與其他一些display屬性類似，table cell同樣會被其他一些css屬性破壞，例如float,position absolute，所以，在使用display table cell與float left或是position absolute屬性盡量不用同用。設定了display table c...
多行文字垂直居中
單行文字垂直居中比較簡單，只需將 line height 屬性值與其父元素的 height 屬性值設為相等即可。如下所示 class text 這是第一段文字span class text 這是第二段文字span class text 這是第三段文字span class text 這是第四段文字sp...