text-align: center仅对行内内容水平居中，多行文本垂直居中需用flex（justify-content + align-items）或grid（place-items），line-height仅适用于单行。
多行文本用 text-align: center 为什么没效果？
因为 text-align: center 只对**行内内容**起作用，它让每行文字在容器内水平居中，但不会改变块级元素自身的垂直位置。如果你发现文字“看起来没居中”，大概率是容器高度没撑开、或父容器没设宽高、或内容被截断了。
单行靠 line-height 居中，多行就失效
line-height 设为和容器高度一致时，单行文字会视觉上垂直居中——这是利用行框（line box）上下留白实现的“假居中”。但多行时，line-height 会作用于每一行之间，导致行距变大、整体下移，反而更偏下。
- 容器高
100px，line-height: 100px→ 单行居中 ✅ - 同样容器，两行文字 → 每行高
100px，第二行直接溢出 ? - 强行调小
line-height（比如1.5）→ 行距正常，但整体不居中 ❌
真正靠谱的多行文本居中方案
现代布局应放弃 line-height 魔法，改用 Flex 或 Grid：
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 200px;
border: 1px solid #ccc;
}或者用 Grid（更简洁）：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
place-items: center; /* 等价于 justify-items + align-items */
height: 200px;
}- 两者都天然支持多行
<p></p>、<span></span>、甚至带br的文本 - 不需要预设字体大小或行高，响应式友好
- IE10+ 支持 Flex，IE11+ 支持
place-items；如需兼容老 IE，得回退到table-cell+vertical-align
老项目里硬要用 line-height 怎么办？
只能限定为单行，并加保护：
.single-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 60px; /* 和容器高度一致 */
height: 60px;
}-
white-space: nowrap强制不换行 -
text-overflow: ellipsis防止文字撑破容器 - 一旦业务允许换行，这个方案就必须废弃
实际开发中，看到有人还在用 line-height 对齐多行文本，基本意味着布局结构没理清——居中不是文本属性的问题，是容器定位的问题。
