解决 display: inline-block + vertical-align 多行文本居中难题
使用 display: inline-block 和 vertical-align: middle 布局多行文本时，常常无法实现理想的垂直水平居中效果。本文将分析原因并提供解决方案。
问题根源在于：vertical-align: middle 基于元素的基线（baseline）进行对齐。对于单行文本，基线清晰易懂；但多行文本的基线则变得模糊，导致居中效果失效。
解决方案：
-
完善HTML结构： 确保HTML结构完整，包含必要的
、等元素，避免结构性问题导致布局错误。巧用 line-height： 父元素的
line-height属性至关重要。它决定了行高，并影响“幽灵节点”的基线位置。 父元素的高度应与line-height值一致，确保文本垂直居中。子元素 line-height 设置： 为子元素设置
line-height: normal。这能避免子元素继承父元素的line-height，从而避免干扰垂直居中效果。修正后的代码示例：
Document 测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例通过以上调整，多行文本即可实现精确的垂直和水平居中。 记住，父元素的
height和line-height的协调一致是解决问题的关键。
