前言
在CSS中，line-height 屬性設(shè)置兩段段文本之間的距離，也就是行高，如果我們把一段文本的line-height設(shè)置為父容器的高度就可以實(shí)現(xiàn)文本垂直居中了，比如下面的例子：

這樣，span標(biāo)簽中的文字就相對(duì)于div垂直方向居中了，想要文本水平居中設(shè)置text-align：center即可。

那么，它怎么就垂直居中了？為了弄清楚它，下面我們先來(lái)看幾個(gè)概念。

1. 行框
在瀏覽器中，會(huì)將給每一段文本生成一個(gè)行框，行框的高度就是行高。行框由上間距、文本高度、下間距組成，上間距的距離與下間距的距離是相等的。

默認(rèn)情況下一行文本的行高分為：上間距，文本的高度，下間距，并且上間距是等于下間距的，所以文字默認(rèn)在這一行中是垂直居中的。

2. 文本中的幾條線

幾條線與行高的關(guān)系圖解：

文本的行高也可以看成是基線到基線的距離。

如果一段文本的高度為16px，如果給他設(shè)置line-height的高度為200，那么相當(dāng)于，文本的上下間距的高度增加了，但是文本本身的高度依然是16是不變的，并且一直默認(rèn)在行框中垂直居中，而上間距和下間距平分了200px的高度并且減去文本本身的高度。所以，容器被這一行文本占滿，而本身文字在自己的一行中是垂直居中的，所以看起來(lái)就像是在容器中垂直居中。

3. Chrome瀏覽器的默認(rèn)值
谷歌瀏覽器字體的默認(rèn)大小是：16px，字體的最小值為：12px，默認(rèn)行高為：18px；默認(rèn)情況下如果沒(méi)有給div設(shè)置高度，那么這個(gè)div的高度會(huì)比其中文本的大小大一點(diǎn)（這個(gè)大多少現(xiàn)在沒(méi)有辦法確定）