text-align: center 仅使行内内容水平居中，无法垂直居中多行文本；正确方案是 flex + align-items:center + justify-content:center，需设置容器高度；line-height 仅适用于单行文本垂直居中。
多行文本用 text-align: center 不居中？不是 CSS 问题，是理解偏差
text-align: center 只控制**行内内容在容器内的水平对齐**，它对多行文本的“垂直居中”完全无效。很多人误以为加了 line-height 就能撑开并垂直居中，结果发现换行后文字上下错位、首行偏高、末行偏低——这是因为 line-height 作用于**每一行的行高基准线（baseline）**，而非整个文本块的几何中心。
真正起作用的是 display: flex + align-items 和 justify-content
现代布局下，多行文本真·居中（水平+垂直）应放弃 line-height 魔法，改用 Flexbox：
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 200px; /* 必须有明确高度才能垂直生效 */
}- 容器需设置固定
height或min-height，否则align-items: center无参照 - 文本本身无需额外
text-align，但加上也不冲突 - 若容器内还有其他元素，需注意
flex的默认flex-direction: row可能导致换行失效；多行文本建议加flex-direction: column或让子元素为block并保留自然流
兼容旧浏览器？用 table-cell 替代方案（慎用）
IE9–10 等老环境不支持 Flex，则可用 display: table-cell 模拟单元格居中：
.container {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 300px;
height: 150px;
border: 1px solid #ccc;
}- 必须同时设
width和height，且父容器不能是flex或grid，否则会失效 -
vertical-align在table-cell下才真正控制垂直对齐，和line-height无关 - 该写法语义混乱、响应式困难，仅作为兜底，不推荐新项目使用
line-height 配合 text-align: center 仅适用于单行文本
如果你坚持用 line-height，它只在以下场景安全有效：
立即学习“前端免费学习笔记（深入）”；
- 容器高度固定，且文本**确定为单行**（例如按钮文字、标题栏）
-
line-height值等于容器height，如height: 48px; line-height: 48px; - 字体大小远小于容器高度，避免因
font-size+line-height计算出的行框溢出 - 禁用换行：
white-space: nowrap，否则第二行会直接顶到容器底部
一旦文本可能换行，line-height 就不再提供任何垂直居中保障——它只是拉开了每行之间的距离，而不是把整个文本块锚定在中间。
