首先，line-height爲行高。height爲高度。單行文本垂直居中寫起來很簡單，但是如果要深入理解其原理還是得花些時間的。
有一個公式必須知道line-height=上距離+內容高度+下距離。
當 line-hieght 等於 height，內容垂直居中
當 line-hieght 大於 height，內容向下移動
當 line-hieght 小於 height，內容向上移動
下面舉個例子來說明：
- line-hieght 等於height的時候，紅色標籤的內容垂直居中
例子：紅色標籤不設置字體大小，那麼內容高度就爲系統默認的16px。紅色標籤的高度height爲50px，紅色標籤的line-hieght爲50px，那麼由公式可知，偏移量爲
(50-50)/2=0，所以紅色標籤的內容垂直居中。也可得知，上距離和下距離都爲(50-16) / 2=17
- line-hieght 大於height的時候，紅色標籤的內容向下偏移。
例子：紅色標籤不設置字體大小，那麼內容高度就爲系統默認的16px。紅色標籤的高度height爲50px，紅色標籤的line-hieght爲60px，那麼由公式可知，偏移量爲
(60-50)/2=5，，所以紅色標籤的內容向下移動5px。也可得知，上距離和下距離都爲(60-16) / 2=22
- line-hieght 小於height的時候，紅色標籤的內容向上偏移
例子：紅色標籤不設置字體大小，那麼內容高度就爲系統默認的16px。紅色標籤的高度height爲50px，紅色標籤的line-hieght爲40px，那麼由公式可知，偏移量爲爲
(40-50)/2=-5，，所以紅色標籤的內容向上移動5px。也可得知，上距離和下距離都爲(40-16) / 2=12
