首先，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
image.png
- line-hieght 大于height的时候，红色标签的内容向下偏移。
例子：红色标签不设置字体大小，那么内容高度就为系统默认的16px。红色标签的高度height为50px，红色标签的line-hieght为60px，那么由公式可知，偏移量为为
(60-50)/2=5，，所以红色标签的内容向下移动5px。也可得知，上距离和下距离都为(60-16) / 2=22
image.png
- line-hieght 小于height的时候，红色标签的内容向上偏移
例子：红色标签不设置字体大小，那么内容高度就为系统默认的16px。红色标签的高度height为50px，红色标签的line-hieght为40px，那么由公式可知，偏移量为为
(40-50)/2=-5，，所以红色标签的内容向上移动5px。也可得知，上距离和下距离都为(40-16) / 2=12
image.png
