深入理解CSS行高line-height与文本垂直居中的原理

什么是行高line-height

行高（line-height）指的是一行文本的高度。它包括了文本的实际高度以及上下文间的空白区域。这些空白区域被称为行框（line box）。

行高可以通过CSS的“line-height”属性进行控制，该属性的值可以设置成像素、百分比、浮点数和normal等，不同的值会影响到行框的高度。

文本垂直居中的原理

要实现文本的垂直居中，可以使用行高的属性。通常情况下，在包含文本的块级元素中设置一致的行高可以实现文本的垂直居中。

方式一：

<div style="line-height: 100px; background-color: yellow;">这是一行文本</div>

这个例子中，我们将块级元素的行高设置为了100像素，文本就垂直居中在了100像素高的块级元素中。

方式二：

<div style="display: flex; align-items: center; justify-content: center; height: 100px; background-color: yellow;">这是一行文本</div>

这个例子中，我们使用了CSS的Flexbox布局来实现块级元素中文本的垂直居中。通过将块级元素的display属性设置为flex，我们可以使用align-items和justify-content属性分别在垂直和水平方向上对文本进行居中。这里，我们将align-items和justify-content属性的值都设置为center，来实现文本垂直居中在高度为100像素的块级元素中。

总结

行高是文本布局中非常重要的一个属性。当我们需要实现文本的垂直居中时，可以通过设置块级元素的行高属性，直接将文本垂直居中。如果需要在实现复杂布局时实现文本的垂直居中，也可以使用Flexbox布局来实现。