不能，line-height仅控制行内框行高，对多行文本只影响行间距；多行垂直居中应使用flex布局（display: flex + align-items: center）。
line-height 能不能直接让多行文字垂直居中？
不能，除非容器高度固定且内容恰好为单行。因为 line-height 本质是控制**行内框（inline box）的行高**，对多行文本只影响行间距，不改变整个文本块在容器中的位置。
常见错误现象：line-height: 100px 配合 height: 100px 看似居中，但一旦文字换行（比如窗口变窄或内容加长），就会顶部堆叠、底部溢出——这不是居中，是“碰巧没露馅”。
- 适用场景：仅限单行文本 + 固定高度容器（如按钮、标签）
- 不适用场景：响应式布局、动态字数、Flex/Grid 布局中嵌套的文本块
- 兼容性没问题，但逻辑脆弱：只要行数变化，
line-height就失效
用 flex 实现多行文字垂直居中（推荐方案）
这是目前最可靠、语义清晰、浏览器支持良好的方式。核心是把容器设为 Flex 容器，并用 align-items 控制交叉轴对齐。
实操建议：
- 给父容器加
display: flex和align-items: center - 确保子元素是块级或默认行为的文本（不需要额外
display: block） - 如果容器有
min-height或响应式高度，flex 依然生效；无需预知内容行数 - 注意：若父容器同时用了
flex-direction: column，则align-items控制的是水平方向，此时该用justify-content: center
示例：
.container {
display: flex;
align-items: center;
height: 120px;
border: 1px solid #ccc;
}
table-cell 方案还有没有存在的必要？
有，但仅限于需要兼容 IE9 及更老版本的极少数项目。它利用表格单元格天然的垂直居中特性，通过 display: table-cell + vertical-align: middle 实现。
问题很实在：
- 必须设置
display: table-cell的元素有高度（height或min-height），且不能是auto - 无法与 Flex 或 Grid 混用；嵌套层级稍深就容易触发怪异的盒模型表现
- 现代项目里，加前缀、写降级、测 IE9 —— 成本远高于收益
- 错误现象：
vertical-align: middle在非table-cell元素上完全无效（比如直接写在p上）
为什么不要用绝对定位 + transform 模拟居中？
虽然 position: absolute; top: 50%; transform: translateY(-50%) 确实能居中，但它把文本从文档流中抽离了，带来一连串副作用。
- 容器高度会坍缩为 0（除非额外设
height），导致父级布局错乱 - 响应式时，若文字行数变化，
transform不自动适配——它只按初始高度算 50% - 可访问性风险：屏幕阅读器可能忽略脱离文档流的内容顺序
- 调试困难：多个绝对定位元素叠加时，z-index 和尺寸推导容易出错
它适合图标、徽章等小装饰元素，不适合正文段落。
真正麻烦的不是“怎么写”，而是“改需求后还保不保得住”。flex 居中一旦写对，后续加行、换字体、调字号，几乎不用动样式——这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
