《CSS世界》读书笔记（十六）

<!-- 《CSS世界》张鑫旭著 -->

line-height与“垂直居中”

line-height 可以让单行或多行元素近似垂直居中，原因在于 CSS 中“行距的上下等分机制”。之所以说近似，是因为文字字形的垂直中线位置普遍要比真正的“行框盒子”的垂直中线位置低。由于我们平时使用的 font-size 都比较小，所以我们往往察觉不到。

多行文本或者替换元素的垂直居中实现原理和单行文本不一样，需要 line-height 属性的好朋友 vertical-align 属性帮助才可以，示例代码如下：

.box {
    line-height: 120px;
    background-color: #f0f3f9;
}
 
.content {
    display: inline-block;
    line-height: 20px;
    margin: 0 20px;
    vertical-align: middle;
}
 
<div class="box">
    <div class="content">基于行高实现的……</div>
</div>

效果可查看：https://demo.cssworld.cn/5/2-4.php

实现的原理大致如下：

（1）多行文字用一个标签包裹，然后设置display为inline-block。好处在于既能重置外部的 line-height 为正常的大小，又能保持内联元素特性，从而可以设置vertical-align属性，以及产生一个非常关键的“行框盒子”。我们需要的是每个“行框盒子”都会附带的一个产物——“幽灵空白节点”。有了这个“幽灵空白节点”，我们的line-height:120px 就有了作用的对象，从而相当于在.content元素前面撑起了一个高度为120px的宽度为0的内联元素。

（如果设置为inline，则.content的line-height【20px】会被.box的line-height【120px】影响，内联元素 line-height 的大值特性，见P125）

（2）因为内联元素默认是基线对齐，所以我们对 .content 元素设置 vertical-align:middle 来调整多行文本的垂直位置，从而实现我们想要的“垂直居中”效果。这里仍然是近似垂直居中，只是 vertical-align 导致的（详见P140）。