css 文本居中多行不对怎么办_text-align center 与 line-height 配合

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 就不再提供任何垂直居中保障——它只是拉开了每行之间的距离，而不是把整个文本块锚定在中间。