
多行文本垂直水平居中:display: inline-block 和 vertical-align 的局限性
使用 display: inline-block 和 vertical-align: middle 虽然能使单行文本垂直居中,但对于多行文本却失效,无法实现水平居中。这是因为 vertical-align: middle 并非针对文本块进行垂直居中,而是调整文本基线与父元素基线对齐。多行文本中,只有第一行基线会居中,后续行则不受影响。
解决方法:完善文档结构,将文本包裹在一个设置了 text-align: center 属性的 div 元素中。
例如:
多行文本内容
通过此方法,父级 div 的 text-align: center 属性将确保所有文本行水平居中,从而实现多行文本的垂直水平居中效果。










