CSS多行居中：text-align与line-height技巧

本文深入剖析了CSS中多行文本居中这一常见却易被误解的布局难题，指出仅依赖`text-align: center`无法实现真正的垂直居中，而滥用`line-height`在多行场景下不仅失效还易引发溢出和错位；文章明确推荐现代、可靠且响应式友好的解决方案——Flexbox（`justify-content + align-items`）和CSS Grid（`place-items: center`），并对比说明其兼容性与适用边界，同时提醒开发者：文本居中本质是容器定位问题，而非文本样式技巧，盲目沿用单行“魔法”往往暴露的是布局结构的不合理。

多行文本用 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学习网公众号！