這幾天遇到了好多關於字型垂直居中的問題，整理一下，希望對大家也有幫助。

vertical-align：middle

vertical-align 用來指定行內元素（inline）和行內塊級元素（inline-block）或表格單元格（table-cell）元素的垂直對齊方式。

inline和inline-block

對於行內元素和行內塊級元素，vertical-align對middle的處理方式都是一樣的。
baseline——基線

元素基線與父元素的基線對齊。

middle——垂直居中

元素中垂線與父元素的基線加上小寫x一半的高度值對齊。

當我們對想要垂直居中的元素設定vertical-align:middle

<style>
.va{vertical-align: middle;}
div{font-size: 36px;
margin: 20px auto;border: 1px dashed #000;text-align: center;}
.inline{display: inline;
font-size: 12px;
border: 1px dashed #000;}
</style>

<div>         
<span class="va inline">inline垂直居中</span
 
>
inline垂直居中
</div>

很明顯，這個垂直居中的效果沒有我們想象中那麼好。
但是如果我們改變策略：
把設定vertical-align: middle;的元素作為標準，周圍的文字就會垂直對齊。
更加通俗的講，就是設定vertical-align: middle;的元素更大一點，周圍的文字元素要更小一點，就能實現周圍文字的垂直居中。
核心程式碼

<style>
.va{vertical-align: middle;}
div{font-size: 12px;//更改了大小
margin: 20px auto;border: 1px dashed #000
 
;text-align: center;}
.inline{display: inline;
font-size: 36px;//更改了大小
border: 1px dashed #000;}
</style>

<div>         
<span class="va inline">inline垂直居中</span>
    inline垂直居中
</div>

這才是我們想要的垂直居中的效果。

table-cell

baseline——基線 (與sub, super, text-top, text-bottom, <length>, <percentage>等屬性具有同樣的效果)

與同行單元格的基線對齊。

middle——垂直居中

單元格垂直居中

本文討論的是文體垂直居中，該屬性的情況就不深入討論了。

line-height + height

當line-height等於height時，可以實現字型垂直居中。
具體實現：
目標元素（字型）的line-height大小等於父類元素的height大小，可以實現垂直居中。
核心程式碼：

<style>
* { margin: 0;padding: 0;}
div{width: 300px;
height: 100px;//父類元素高度
margin: 20px auto;border: 1px dashed #000;text-align: center;}
.lh{font-size:24px;
line-height:100px; //目標垂直字型的行高
}
</style>

<div>         
 <span class="lh">inline垂直居中</span>
</div>

行內塊級元素垂直居中+vertical-align：top

這種方法比較麻煩，但是適用於更多的場合。
實現過程如下：
1. 更改字型所在的元素為display：inline-block，position：relative;
2. 設定字型的line-height與font-size相等；
3. 設定字型所在元素，top：50%;，vertical-align:top，margin-top為負的font-size大小的一半。

核心程式碼

<style>
* { margin: 0;padding: 0;}
 div{width: 300px;height: 100px;margin: 20px auto;border: 1px dashed #000;text-align: center;}
.middle{display: inline-block;position:relative;
font-size:24px;line-height:24px;
top:50%;margin-top:-12px;
vertical-align:top; }
</style>

<div>         
<span class="middle">inline垂直居中</span>
</div>

實現的思路：
1. 將字型放置到一個行內塊級元素中
2. 將行內塊級元素垂直居中

細節說明：

• display：inline-block讓span元素變成一個行內塊級元素，配合position：relative;top:50%;margin-top:-12px;可以實現塊級元素垂直居中。

• font-size與line-height相等是為了保證span元素的高度不被行間距所影響，高度只由font-size控制，方便了margin-top的設定。

• vertical-align:top是為了保證字型是頂格的，讓文體看起來更像是垂直居中。

前兩條估計大家都懂，我來詳細說說最後一條vertical-align:top。

vertical-align:top
把元素的頂端與行中最高元素的頂端對齊。

我們先來看看
vertical-align：baseline | middle | top 這三種的效果。
基線的效果：

中線的效果：

頂線的效果：

我們可以這樣想象：
由於我們設定了position：relative;top:50%;margin-top:-12px;，這相當於從上向下排列元素。
如果我們要保證字型也垂直居中，也必須字型在元素內部的從上到下排列（也就是所說的頂格），所以需要設定vertical-align:top。