CSS 使用line-height实现单行文字垂直居中的原理 图解

首先，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