深入了解line-height文字垂直居中

先思考下面这个问题：默认空div高度是 0，但是一旦里面写上几个文字，div高度就有了，请问这个高度由何而来，或者说是由哪个 CSS 属性决定的？

如果仅仅通过表象来确认，估计不少人会认为div高度是由里面的文字撑开的，也就是font-size 决定的，但本质上是由 line-height 属性全权决定的，尽管某些场景确实与font-size 大小有关。

我们不妨设计一个简单的例子来看看真相究竟是什么。例如：

结果如下图(windows IE6浏览器下)：

很显然，从上面这个例子可以看出，div高度是由行高决定的，而非文字。

为什么 line-height 可以让内联元素“垂直居中”

坊间流传着这么一种说法：“要想让单行文字垂直居中，只要设置 line-height 大小和height 高度一样就可以了。”类似下面这样的代码：

从效果上看，似乎验证了这种说法的正确性。但是，实际上，上面的说法对 CSS 初学者会产生两个严重的误导，同时，语句本身也存在不严谨的地方！

误区之一：要让单行文字垂直居中，只需要 line-height 这一个属性就可以，与 height一点儿关系都没有。也就是说，我们直接：

误区二：行高控制文字垂直居中，不仅适用于单行，多行也是可以的。准确的说法应该是“line-height 可以让单行或多行元素近似垂直居中”。稍等，这里有个词似乎和上面的表述有点儿微妙的差异，“近似垂直居中”？没错，一定要加上“近似”二字，这样的说法才足够严谨。换句话说，我们通过 line-height 设置的垂直居中，并不是真正意义上的垂直居中！究竟是怎么一回事？

这里，其实要解答的是两个问题，一个是为何可以“垂直居中”，另一个是为何是“近似”。正如上一节所说的，没有什么理所当然，行高可以实现“垂直居中”原因在于 CSS 中“行距的上下等分机制”，如果行距的添加规则是在文字的上方或者下方，则行高是无法让文字垂直居中的。说“近似”是因为文字字形的垂直中线位置普遍要比真正的“行框盒子”的垂直中线位置低，譬如我们拿现在用得比较多的微软雅黑字体举例：

结果，我都不需要标注，肉眼就能看出字形明显偏下，如图

由于我们平时使用的 font-size 都比较小，12px～16px 很多，因此，虽然微软雅黑字体有下沉，但也就 1 像素的样子，所以我们往往觉察不到这种“垂直对齐”其实并不是真正意义上的垂直居中，只是感官上看上去像是垂直居中罢了。这也是我总是称line-height 实现的单行文本垂直居中为“近似垂直居中”的原因。