CSS多行文本居中：text-align与line-height应用

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《CSS多行文本居中技巧：text-align与line-height搭配使用》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

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;
}

• 两者都天然支持多行

  、、甚至带 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 对齐多行文本，基本意味着布局结构没理清——居中不是文本属性的问题，是容器定位的问题。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS多行文本居中：text-align与line-height应用》文章吧，也可关注golang学习网公众号了解相关技术文章。