摘要：在中實(shí)現(xiàn)垂直居中很多時(shí)候會(huì)用到，不過我一直對(duì)的使用糊里糊涂，現(xiàn)在整理一下關(guān)于它的一些知識(shí)點(diǎn)。將盒子的垂直中心點(diǎn)與父級(jí)盒子基線往上一半高度的位置對(duì)齊。時(shí)位置與設(shè)置一致。我們可以將設(shè)為來讓元素完全垂直居中。

在 css 中實(shí)現(xiàn)垂直居中很多時(shí)候會(huì)用到 vertical-align ，不過我一直對(duì) vertical-align 的使用糊里糊涂，現(xiàn)在整理一下關(guān)于它的一些知識(shí)點(diǎn)。原文鏈接

vertical-align屬性只能適用于內(nèi)聯(lián)元素( inline )、內(nèi)聯(lián)塊元素( inline-block )和table-cell元素( td )，包括 display 屬性為 inline 、inline-block 和 table-cell 的元素。由于元素在浮動(dòng)和絕對(duì)定位之后會(huì)自動(dòng)轉(zhuǎn)換為塊元素( block )，所以浮動(dòng)和絕對(duì)定位元素也沒有 vertical-align 屬性。

關(guān)于文本的頂線、中線、基線和底線已經(jīng)在介紹行高的文章中的配圖中解釋過了。

line box 的基線等于這一行中沒有經(jīng)過任何人為對(duì)齊設(shè)置的文本的基線。

inline block 元素的基線位置，在css中規(guī)定是：

The baseline of an "inline-block" is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its "overflow" property has a computed value other than "visible", in which case the baseline is the bottom margin edge.
inline-block 元素的基線是這個(gè)元素下正常文檔流中最后一個(gè) line box 的基線，除非這個(gè)元素中沒有正常流的 line box 或者本身的 overflow 屬性值不是默認(rèn)的 visible ，這個(gè)時(shí)候 inline-block 元素的基線位置是margin的底邊緣。

以下是 w3c 中關(guān)于vertical-align取值的規(guī)定：

baseline: 默認(rèn)值，盒子的基線與父級(jí)盒的基線對(duì)齊。如果這個(gè)盒子沒有基線，就讓這個(gè)盒子的 margin 底邊緣和父級(jí)盒基線對(duì)齊。

middle: 將盒子的垂直中心點(diǎn)與父級(jí)盒子基線往上 X 一半高度的位置對(duì)齊。

sub： 降低盒子的基線到父級(jí)盒合適的下標(biāo)位置。

super： 提高盒子的基線到父級(jí)盒合適的上標(biāo)位置。

text-top: 將盒子的頂部（top）與父級(jí)盒子內(nèi)容區(qū)域的頂部對(duì)齊。

text-bottom: 將盒子的底部（bottom）與父級(jí)盒子內(nèi)容區(qū)域的底部對(duì)齊。

%: 將盒子相對(duì)基線位置上移或下移多少位置（百分比的值時(shí)相對(duì)于行高 line-height ），" 0% "時(shí)位置與設(shè)置 baseline 一致。

數(shù)值： 將盒子相對(duì)基線位置上移或下移多少位置。0px 時(shí)位置與設(shè)置 baseline 一致。

top: 將盒子的頂部與行框 line box 的頂端對(duì)齊（行框的頂部就是這一行行內(nèi)框的最高點(diǎn)）。

bottom: 將盒子的底端與 行框 line box 的底端對(duì)齊（行框的底端就是這一行行內(nèi)框的最低點(diǎn)）。
以上前8個(gè)的取值是相對(duì)于盒子的父級(jí)盒子，后2個(gè)取值是相對(duì)于這一行的行框 line box 。從之前行高的文章我們知道了盒子的頂部與父級(jí)盒子內(nèi)容區(qū)頂部的間距就是半行距，當(dāng)盒子的字體大小等于 line-height 大小時(shí)，盒子和父級(jí)盒子的內(nèi)容區(qū)域會(huì)重疊，也就是下面 demo 中 表示 text-top 和 text-bottom 的線會(huì)與表示 top 和 bottom 的線重合。

下面 demo 來自 Vertical-Align: All You Need To Know。便于理解各種取值之間的關(guān)系。
verrical-align 參考線模型

上面 demo 中，不同顏色的高度為 0 的線設(shè)置不同的 vertical-align 值，利用 margin-right 負(fù)值將所有的線和最后一個(gè)行塊放置在同一個(gè)行框 line box 中。

剛開始看到這個(gè) demo 的時(shí)候，完全不清楚為什么這幾個(gè)寬度和父級(jí)一樣線能夠放在同一個(gè)行框中，了解之后知道是 margin 負(fù)值的作用， margin 負(fù)值的相關(guān)知識(shí)在文章最后。

demo 中的所有元素都處在同一個(gè)行框 line box 中，這幾根線表示這個(gè)行框的各個(gè)參考線。六個(gè)灰塊分別設(shè)置不同的 vertical-align 值來與父元素對(duì)齊。仔細(xì)觀察

基線對(duì)齊是子元素的基線和父元素的基線對(duì)齊，demo 中這個(gè)子元素的基線是末尾的X的下邊緣。

仔細(xì)測(cè)量居中對(duì)齊塊的上下距離之后我們會(huì)發(fā)現(xiàn)，這個(gè)塊并不是完全得居中對(duì)齊。這并不是 bug ，而是安全按照 w3c 的規(guī)定：“盒子的垂直中心點(diǎn)與父級(jí)盒子基線往上 X 一半高度位置對(duì)齊”， middle 參考線也穿過最左邊 X 的中心，而字符具有下沉特性，所以 X 的中心并不是字符所在行內(nèi)框的中心點(diǎn)，也就不在整個(gè)行框的中心點(diǎn)。我們可以將 font-size 設(shè)為 0 來讓元素完全垂直居中。

對(duì)齊小圖標(biāo)
由于 vertical-align 為 middle 并不能讓元素完全居中，會(huì)受到字體大小的干擾，在這種小圖標(biāo)的對(duì)齊上使用 middle 會(huì)使得這種干擾更明顯，所以設(shè)置像素值讓小圖標(biāo)相對(duì)于基線偏移的做法更準(zhǔn)確一些。

查看 demo（測(cè)試發(fā)現(xiàn)預(yù)覽中的按鈕點(diǎn)擊無效，請(qǐng)直接點(diǎn)擊原鏈接測(cè)試）
上面 demo 中，當(dāng)我們改變圖片的 vertical-align 屬性值時(shí)，發(fā)現(xiàn)整個(gè)行框的基線位置也發(fā)生了變化。這是因?yàn)檫@個(gè)行框中最高點(diǎn)和最低點(diǎn)都在圖片上，所以行框的高度就等于這個(gè)圖片的高度，當(dāng)圖片的 vertical-align 值發(fā)生變化時(shí)，行框內(nèi)沒有足夠的空間可以讓圖片移動(dòng)，所以只能移動(dòng)基線。

而且當(dāng)圖片的 vertical-align 值設(shè)置為 middle 時(shí)，圖片并沒有在父級(jí)中垂直居中，這是因?yàn)閳D片只是在所在行框中近似垂直居中，要想讓圖片在父級(jí)中居中，可以讓行框的高度等于父級(jí)盒子的高度。也就是可以讓父級(jí)的 line-height 等于高度。
圖片垂直居中
字體大小設(shè)置為 0 是讓元素完全垂直居中
在上面的例子中，有沒有文本標(biāo)簽都沒有區(qū)別，我們可以看做父級(jí)盒子中有一個(gè)空白的文本節(jié)點(diǎn)來作為基線位置的參考。

方法2鏈接描述
上面 demo 的方法創(chuàng)建一個(gè)高度為 100% 的偽元素（空元素也可以），這樣這個(gè)元素的基線就會(huì)和父級(jí)的基線重合，空元素的垂直中心點(diǎn)也與父級(jí)的中心重合，圖片也會(huì)垂直居中。

文本垂直居中
垂直居中文本的方法和圖片的方法差不多，文本標(biāo)簽 inline-block 化，然后按照居中圖片的方法來居中。其中需要注意的是父級(jí)元素設(shè)置 font-size 為 0 ，這是為了消除偽元素（或者空元素）與文本標(biāo)簽之間的間隙，如果這個(gè)間隙存在，那么這個(gè)偽元素會(huì)換行，不和文本元素在同一個(gè)行框中，垂直居中就會(huì)失效。

margin 的四個(gè)取值中，本質(zhì)上雖然都是在和其他元素之間產(chǎn)生間距，但實(shí)現(xiàn)的方法卻不一樣。其中 left 和 top 值是相對(duì)相鄰元素的邊界改變自己的位置，而 right 和 bottom 是相對(duì)元素本身位置來影響周邊元素的位置（實(shí)際上是影響右邊和下邊相鄰元素的參考線）。

當(dāng) margin 值為正值時(shí)，會(huì)按照正常邏輯向元素四周產(chǎn)生間距。當(dāng)元素的 margin-left 和 margin-top 為負(fù)值時(shí)，元素會(huì)向左或向上移動(dòng)，當(dāng)元素的 margin-right 和 margin-bottom 為負(fù)值時(shí)，元素右邊和下邊的元素的參考線位置會(huì)變化。

上面的 demo 中，六條參考線的寬度都與父元素一致，所以默認(rèn)會(huì)處在六個(gè)不同的行框 line box 中。但給他們都設(shè)置了 margin-right 負(fù)值，這個(gè)負(fù)值足夠小的話，會(huì)將下一行的元素拉上來。

正常情況下 margin-right 的值等于負(fù)的元素寬度就可以實(shí)現(xiàn)，不過六個(gè) inline-block 元素之間默認(rèn)會(huì)有間隙，我們可以把代碼寫成一行來避免這個(gè)間隙的出現(xiàn)，不過可讀性就比較差，這個(gè)間隙的大小默認(rèn)是和父元素的字體大小有關(guān)的，也可以把父元素 font-size 設(shè)為 0 來消除間隙，不過這樣就會(huì)導(dǎo)致幾根參考線重合，影響表達(dá)效果。所以上面 demo 中線元素的 margin-right 值的絕對(duì)值都稍大于元素的寬度，這是為了抵消正常流中 inline-block 元素之間的間隙。