line-height 单行居中有效而多行失效，因其仅作用于每行内部，无法控制多行文本整体垂直居中；flexbox 的 align-items: center 是多行居中标准方案，需容器有明确高度且子元素为直接子元素。
line-height 单行居中有效，多行失效的原因
line-height 实现垂直居中，本质是让行高撑开容器，并让单行文本在该行高中间对齐。一旦文本换行，line-height 仅作用于每一行内部，而非整个文本块，容器内多行内容会从顶部开始堆叠，底部留白——此时“居中”就失效了。
- 多行文本高度不可预知，无法用固定
line-height匹配 -
line-height不是布局属性，它不控制块级元素的对齐行为 - 常见误用：
line-height: 200px配合height: 200px，只对单行可靠
flexbox 实现多行文字垂直居中的标准写法
用 display: flex + align-items: center 是目前最稳妥、语义清晰的方案，兼容性已覆盖所有现代浏览器（包括 iOS Safari 10.3+ 和 Android Chrome 4.4+）。
- 容器必须有明确高度（
height或min-height），否则align-items: center无参照 - 文本元素需是 flex 容器的直接子元素（不能套多层
div而忘记设flex） - 若需同时水平居中，加
justify-content: center - 示例：
.container { display: flex; align-items: center; height: 120px; border: 1px solid #ccc; } .container p { margin: 0; /* 防止默认 margin 破坏居中 */ }
line-height 和 flexbox 混用会出什么问题
有人试图“保险起见”，在 flex 容器里还给子元素加 line-height，这反而容易引发意外：
-
line-height会撑大内联元素的行框，可能使align-items: center计算偏移 - 若子元素是
span或未设display: block，flex 对齐可能不生效 - 在某些旧版 Safari 中，
line-height与flex共存时出现 1px 偏移 - 正确做法：关闭干扰项——重置
margin、padding，子元素用display: block（如p、div），不设line-height
响应式场景下要注意高度可变性
当容器高度随屏幕变化（如 height: 80vh 或 min-height: calc(100vh - 60px)），flex 方案依然可靠，但需注意：
立即学习“前端免费学习笔记（深入）”；
- 避免在子元素上写死
height或max-height，否则可能截断文字 - 如果文字过长导致溢出，应配合
overflow: hidden和text-overflow: ellipsis（注意：后者仅对单行有效；多行省略需用display: -webkit-box） - 移动端小屏下，字体缩放可能影响视觉居中感，建议用
rem或em控制字号，保持比例稳定
真正要小心的是容器高度为 auto 或依赖内容撑开的情况——这时候谈“垂直居中”本身就没有意义，得先明确设计约束。
