1. 引言
在网页设计与开发中，文字内容的垂直居中一直是一个常见问题。由于不同浏览器的默认行高、字体大小等参数不同，常规的垂直居中方式难以保证在各种情况下都能完美展示。
本文将介绍几种实现垂直文本居中的CSS技巧，同时比较它们的优缺点，帮助读者在实践中选择最佳的方案。
2. 垂直居中基本概念
2.1 行框架——line box
行框架指的是一行文字和其他元素组成的矩形区域。每行的高度由行内元素中最高的框架的高度决定。如下图所示，红色虚线所示即为行框架，蓝色虚线为该行最高的框架。
/* 确定行高 */
p {
font-size: 16px;
line-height: 1.5;
}
上述CSS代码定义了一个段落的字体大小为16像素，行高为字体大小的1.5倍（即24像素）。该段落中的每行都将被塞到高为24像素的框架中。
2.2 基线——baseline
基线是一个虚拟的概念，指的是字母x或大写字母E的下缘所在的线条。在垂直居中中，我们可以利用基线对齐的方式来对元素进行调整。如下图所示，两个元素的基线对齐，因此它们的中心线（represented axis）也对齐了。
3. 方法汇总
下面我们将介绍实现垂直文本居中的几种方法，分别是：
使用line-height
使用vertical-align
使用flexbox
使用table
3.1 使用line-height
这是最常见的一种方式，即通过设置行高让文字垂直居中。它的优点是简单易懂，同时使用较广泛。缺点是如果样式表中有其他元素没有统一的行高，则难以保证文本的完美居中。
.container {
height: 200px;
line-height: 200px;
}
上面的代码设置一个高为200像素的容器，并将行高同步设置为200像素。这样容器内的文本就会垂直居中了。
需要注意的是，这种方式只对单行文本生效。如果文本超出1行，则只有第一行能够居中，后面的行会按照默认的行距排列。
3.2 使用vertical-align
这种方式是利用基线对齐的方式来实现垂直居中。不同于line-height，vertical-align可以保证多行文本的完美居中。同时，这种方式对于含有图片或其他元素的情况也十分实用。
.container {
display: table-cell;
vertical-align: middle;
}
上述代码定义了一个表格单元格的样式，其中垂直对齐方式为middle（即居中对齐）。
需要注意的是，vertical-align的使用对象必须设置为行内级别（或表格单元格），否则无法正常居中。
3.3 使用flexbox
flexbox是较为新的CSS布局模式，它在处理垂直居中时表现优异。flexbox可以同样实现文字垂直居中，且对于一些宽度未知的元素，也更加实用。
.container {
display: flex;
justify-content: center;
align-items: center;
}
上述代码定义了一个flex容器的样式，其中垂直和水平对齐的方式均为center。这样容器内部的文本就可以实现垂直居中了。
3.4 使用table
这种方式使用的最少，但其兼容性良好，通用而且易于理解。具体实现方式是使用display: table和display: table-cell两个CSS属性来定义一个表格单元格。
/* 容器设置display: table */
.container {
display: table;
height: 200px;
/* 容器内元素设置为单元格 */
display: table-cell;
vertical-align: middle;
}
上述代码定义了一个表格单元格的样式。
4. 总结与比较
通过上面的介绍，我们可以看到各种方法的优缺点如下：
使用line-height：简单易懂，但只适合单行文本。
使用vertical-align：适用于多行文本和包含其他元素的情况，兼容性较好。
使用flexbox：最佳的解决方案，但兼容性较差，需要在IE10以下的浏览器中进行兼容。
使用table：通用而易于理解，但语义不够明确。
因此，在使用时需要根据不同的场景选择最佳的垂直居中方案。
5. 参考资料
Centering in CSS: A Complete Guide (CSS-Tricks)