使用display: inline-block和vertical-align实现多行文本垂直居中的局限性
display: inline-block结合vertical-align常用于文本垂直居中，但多行文本时效果不佳。这是因为“幽灵节点”的基线在多行文本中位置变化导致的。
幽灵节点基线的影响
display: inline-block元素内部会生成一个“幽灵节点”，其高度与父元素的行高(line-height)相同。vertical-align: middle将元素垂直居中于幽灵节点的中线。单行文本时，幽灵节点基线与文本基线一致；多行文本时，幽灵节点基线会位于底行文本基线下方，导致垂直居中失效。
解决方案：消除幽灵节点基线的影响
为了在多行文本场景下实现垂直居中，需要解决幽灵节点基线与文本基线错位的问题。 方法是移除或调整幽灵节点的行高。
以下代码示例演示了如何通过设置line-height: normal来解决这个问题，实现多行文本垂直居中：
测试示例测试示例测试示例测试示例测试示例测试示例
测试示例测试示例测试示例测试示例测试示例测试示例
测试示例测试示例测试示例测试示例测试示例测试示例
.parent {
height: 100px;
background-color: aqua;
text-align: center; /* 水平居中 */
}
.child {
color: #fff;
background-color: blueviolet;
vertical-align: middle;
line-height: normal; /* 关键：将行高设置为normal */
display: inline-block;
}
通过将.child元素的行高设置为normal，我们消除了幽灵节点的影响，从而实现了多行文本的垂直居中。
