CSS line-height与垂直居中

CSS line-heigh与垂直居中

我们都知道，在CSS中，要想实现字体在父元素中垂直居中直接让line-height等于height即可。可是为什么这样设置就可以让文字垂直居中呢？要弄懂这个问题需要先理解以下几个概念。

1、行高

行高指一行文字的基线到下一行文字的基线之间这一段距离

行高的高度 = 字体高度 + 上间距 + 下间距

2 、行框

在浏览器中，会将给每一段文本生成一个行框，行框的高度就是行高。
这个行框是不可见的。浏览器会把在生成一个字体时会把行框分为三部分。字体本身的高度和上下两部分高度 即 $\frac{行高-字高}{2}$。之后浏览器会将这三部分从上到下依次向父元素盒子填充。

3、行框生成过程

例如，设置 字体大小 font-size=16px 行高 line-height=200px。 那么$200-12=184px$。所以上下两部分各自分得$92px$

4、文字垂直居中实现

设置父盒子的height=200px。则行框的高=父元素的高=行高=200px，依次把行框三部分从上到下填充父盒子可以正好填满。由于上部分和下部分都等于 $\frac{行高-字高}{2}$。所以就有了垂直居中的效果

这就是设置line-height==height时实现垂直居中的原理