CSS 文字居中怎么实现？附 4 种常见方法一次讲清

CSS 文字居中，最常用的是给块级父元素设 text-align: center 做水平居中，或者用 flex 的 justify-content: center 与 align-items: center 同时搞定水平与垂直居中。本文一次讲清 4 种主流做法：text-align 负责水平居中，line-height 负责单行垂直居中，flex 弹性布局负责同时居中，grid 与绝对定位负责兜底。你还会看到「多行文字怎么垂直居中」「图片和文字混排如何对齐」「老浏览器怎么兼容」这些真实布局里会踩的坑怎么填。读完你不仅能把文字摆到正中间，还知道每种写法该用在哪个场景，少写一堆 hack。今天编程狮就把这块讲透。

CSS 文字居中方法图

一、为什么要文字居中

文字居中是页面里最高频的布局需求之一，导航条的标题、卡片的标题、弹窗的提示语、空状态的文案，几乎都离不开它。很多新手一上来就给元素加各种 margin 和 padding 去「凑」位置，结果窗口一缩放就歪了，或者换了行数就错位。其实居中的本质只有两类：水平居中和垂直居中，再叠加「单行还是多行」「块级还是行内」这几个维度，就能挑出最合适的写法。把几种方法吃透，你遇到任何居中需求都能一两行 CSS 解决，而不是靠试错。下面先讲水平方向最省事的做法。

二、方法一：text-align 实现水平居中

适合谁：要居中内容是行内元素或普通文本（比如一段说明文字、一个链接、一组按钮）。代价：它只对「行内内容」生效，对块级子元素无效。

.box {
  text-align: center;
}

把 text-align: center 写在父容器上，它内部的所有行内内容（文字、<span>、<a>、<img>）都会水平居中。注意是「写在父元素上、作用于子内容」，新手常犯的错误是把 text-align 写到自己身上却期待它移动自己。想系统理解 CSS 盒模型与文本排版，可以看 CSS 完整教程。

这种写法的强项是简单、兼容极好，IE 时代就能用。但它只能水平、不能垂直，而且遇到块级子元素（比如一个 div）就无能为力——块级元素默认占满一行，text-align 管不到它。所以 text-align 最合适的位置是「标题下方一段居中的副文案」「居中的导航链接」这类纯文本场景，别指望它去居中一个卡片。

三、方法二：line-height 实现单行垂直居中

适合谁：只有一行文字，且高度固定（比如 40px 高的导航项、按钮里的文字）。代价：只适用于单行，多行会重叠。

.nav-item {
  height: 40px;
  line-height: 40px;
}

让 line-height 等于容器高度，单行文字就会在垂直方向被「撑」到正中间。原理是：行高决定了每行文本所占的高度，当行高等于盒子高度时，这一行正好落在盒子正中。它是纯文本场景下最轻量的垂直居中方案，不需要 flex 或定位。

但要警惕一个坑：line-height 只对单行有效。一旦文字换行成两行，第二行会紧挨着第一行往下排，整体就不再居中了，甚至会溢出盒子。所以导航项、标签这类「高度固定且单行」的元素用 line-height 最稳；如果是会换行的段落，请直接跳到后面的 flex 或 grid 方案。

四、方法三：flex 布局同时水平垂直居中

适合谁：几乎任何场景，尤其是「既要水平又要垂直」的多行内容。代价：理解成本略高，极老浏览器（IE9 及以下）不支持。

.center {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 200px;
}

flex 是目前最推荐的居中手段：父元素 display: flex 后，justify-content 管主轴（默认水平）对齐，align-items 管交叉轴（默认垂直）对齐，两个都设 center 就实现双向居中。它对付多行文字、不定高内容都游刃有余，而且子元素不管是块级还是行内都生效。flex 布局常要结合 HTML 结构来组织，HTML 结构教程能帮你把容器和子项的关系理清楚。

flex 的额外好处是可扩展性：想让多个子项平均分布、想靠右、想换行，只需改几个属性值。日常项目里，弹窗内容、卡片正文、登录框，几乎一律能用 flex 居中。唯一要注意的是它在非常老的浏览器上需要加厂商前缀，现代开发基本不用操心。

五、方法四：grid 与绝对定位，以及怎么选和坑

如果连 justify-content/align-items 都嫌啰嗦，grid 有一行写法：

.center {
  display: grid;
  place-items: center;
  height: 200px;
}

place-items: center 相当于同时设了水平与垂直居中，语义极清晰。grid 居中特别适合「单容器装单内容」的场景，比如整页的大幅欢迎语。还有绝对定位兜底法：父元素 position: relative，子元素 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)，靠位移把自己拉回正中，兼容性最好，但会脱离文档流，布局时要留意父容器高度。

怎么选：简单水平居中用 text-align；单行垂直用 line-height；多行或双向居中优先 flex，追求极简用 grid；要兼容古董浏览器才上绝对定位。高频坑有三个：一是把 text-align 写到子元素自己身上没用，要写在父容器；二是 line-height 遇到多行会重叠，别硬撑；三是 flex 或 grid 居中失效，多半是忘了给父容器一个明确高度，没有高度就没有「中间」可言。

CSS 文字居中怎么选

总结

CSS 文字居中，日常这样记就够：纯文本水平居中用 text-align: center；单行垂直居中用 line-height 等于高度；双向（尤其多行）居中用 flex 的 justify-content 与 align-items 皆设 center，或 grid 的 place-items: center；要兼容极老浏览器才用绝对定位加 transform。要点带走：

text-align 写在父容器上、只管行内内容，块级子元素它管不到；
line-height 只适合单行，多行会重叠，别硬用；
flex 与 grid 居中前，记得给父容器一个明确高度，否则「居中」无从谈起。

延伸学习

想把布局基础打牢，可以按这个顺序来：

先过一遍前端专栏：常用布局完全指南，理解脚本如何配合 CSS 动态调整居中；
想看另一种实战讲法，参考 CSS 居中实战笔记里的多场景示例；
写完想立刻试，HTML编译器在线运行 CSS 代码免安装直接跑片段。

常见问题

Q：多行文字怎么垂直居中？

A：优先用 flex 或 grid。给父容器 display: flex; align-items: center（配合一个明确高度），多行文字会在垂直方向整体居中，换行也不会乱。line-height 只适合单行，多行请用 flex 或 grid，别用 line-height 硬撑。

Q：text-align: center 为什么对块级子元素没用？

A：text-align 控制的是「行内内容」的对齐，而块级元素（如 div）默认占满整行，没有可对齐的剩余空间。要居中块级子元素，应改用 flex 的 justify-content: center，或给子元素设 margin: 0 auto 做水平居中。

Q：flex 居中了但内容跑偏，可能是什么原因？

A：最常见是父容器没有确定高度，导致没有「中间」可供居中；其次是把 align-items 写成了 align-content，后者只在多行 flex 下生效。确认父容器有高度，且 justify-content 与 align-items 都设了 center 即可。