[TOC] 在CSS中，line-height 屬性設置兩段段文本之間的距離，也就是行高，如果我們把一段文本的line-height設置為父容器的高度就可以實現文本垂直居中了，比如下面的例子： ```html <div> <style> div { width: 300px; height: 200px; border: 1px solid red; } span { line-height: 200px; } </style> <span>文本垂直居中原理</span> </div> ``` 這樣，span標簽中的文字就相對于div垂直方向居中了，想要文本水平居中設置text-align：center即可。  那么，它怎么就垂直居中了？為了弄清楚它，下面我們先來看幾個概念。 ## 1. 行框 在瀏覽器中，會將給每一段文本生成一個**行框**，行框的高度就是行高。行框由上間距、文本高度、下間距組成，上間距的距離與下間距的距離是相等的。  默認情況下一行文本的行高分為：上間距，文本的高度，下間距，并且上間距是等于下間距的，所以文字默認在這一行中是垂直居中的。 ## 2. 文本中的幾條線  幾條線與行高的關系圖解：  文本的行高也可以看成是基線到基線的距離。  如果一段文本的高度為 16px，如果給他設置`line-height`的高度為 200，那么相當于，文本的上下間距的高度增加了，但是文本本身的高度依然是 16是不變的，并且一直默認在行框中垂直居中，而上間距和下間距平分了200px 的高度并且減去文本本身的高度。所以，容器被這一行文本占滿，而本身文字在自己的一行中是垂直居中的，所以看起來就像是在容器中垂直居中。 ## 3. Chrome瀏覽器的默認值 谷歌瀏覽器字體的默認大小是：16px，字體的最小值為：12px，默認行高為：18px；默認情況下如果沒有給div設置高度，那么這個div的高度會比其中文本的大小大一點（這個大多少現在沒有辦法確定） ## 4. 行高的單位 **px(像素)** 設置起來是最直接的，同時也最方便的。 **%(百分號)** 如果`line-height`單位設置為%，那么將來在計算的時候，基數是當前標簽中的文本的字體的大小。如果是%,%之前的數據一定是整數 ：150% ，200% **em** 效果跟%是一樣一樣的。注意：一行em的大小相當于是當前標簽中的font-size的大小。如果是em,em之前的數據一定是：1.2em ,1.5em ,2em **不帶單位** 如果不涉及到繼承，那么帶不帶單位（em）都是一樣的效果，但是如果涉及到繼承的話，那么就有很大的區別了： - 如果單位是em，那么將來在繼承的時候，我們的瀏覽器會先將行高對應的具體的數值計算出來以后再繼承。 - 如果沒有單位，那么將來在繼承的時候，我們的瀏覽器會先將line-height這個屬性繼承給子元素，再在子元素的font-size來計算。line-height: 1.5; ## 5. 行高可以被繼承 我們知道，CSS的三大特性是繼承、層疊、優先級。line-height也是可以被繼承的，如下面的示例： ```html <div> <style> span { display: inline-block; } </style> <span>中國人</span> </div> ``` 在不給div設置行高的情況下，span標簽的文字行高默認為18  接著我們給div設置一個行高等于20px ```css div { line-height: 20px; } span { display: inline-block; } ``` 我們再來看看span標簽的的變化  而且，不管我們給行高設置什么單位（px、%、em、不帶單位）都可以被繼承。 ## 6. 行高計算的基數 如果行高的單位不是px，那么將來行高要進行計算：這個計算需要一個基數，這個基數是當前標簽的字體大小，而不是瀏覽器默認字體大小。以上面的例子為例，我們并沒有設置任何字體大小，此時我們把line-height設置為150%，那么文字行高將變為24px，即`（16px*1.5=24）`。 ```css div { line-height: 150%; } ```  此時我們在給div設置一個`font-size`等于20px： ```css div { line-height: 150%; font-size:20px; } ```  文字行高將會變成30px，即`20px*1.5=30px`