CSS 怎么让 div 水平垂直居中？4 种方法一文讲清（Flex/Grid/定位）

你写了 text-align: center 和 margin: auto，左边距、上边距却怎么都对不齐；或者盒子总是贴着左上角，怎么推都推不到中间。这是每个前端新手都会卡住的第一道布局关卡。CSS 居中的核心答案只有一句：让父容器成为「有秩序的摆放空间」，再用对应的对齐属性把子元素推到中心。今天这篇文章，编程狮就把 CSS 居中这件事从原理到写法彻底讲透。

本文基于现代浏览器（Chrome / Edge / Firefox / Safari 近三年版本）验证，覆盖 Flex、Grid、绝对定位、表格四种做法，并附上适用场景对比和踩坑清单。看完你不但能写出居中的代码，还能判断当下该用哪一种，而不是抄一段不明所以的片段。

一、为什么居中这么难：先搞懂文档流与盒模型

CSS 居中之所以让人生畏，是因为它其实包含两个独立的问题：水平居中、垂直居中。水平方向浏览器天然支持（text-align、margin: auto），垂直方向却没有这么顺手的默认值，于是「水平好了垂直歪」成了常态。

盒模型（box model）是理解居中的地基。每个 HTML 元素在页面上都是一个矩形盒子，由内容、内边距（padding）、边框（border）、外边距（margin）四层组成。如果你还不熟悉这套概念，可以先过一遍 CSS 教程里的盒模型章节，后面所有居中写法都建立在它之上。

文档流（normal flow）指的是元素默认的从上往下、从左往右排列规则。块级元素（如 div）默认占满一行，所以两个 div 是上下堆叠的；行内元素（如 span）才从左到右排。理解这一点，你就能明白：要让一个 div 在父盒里居中，本质是把「默认的堆叠规则」改成「受控的对齐规则」。

💡 小提示：居中的「中」是指相对父容器的中心，不是相对整个屏幕。先确认你有没有一个明确尺寸的父盒子，这是 90% 居中失败的根源。

新手最容易混淆的两个属性是 text-align: center 和 margin: 0 auto。前者只对行内内容（文字、图片）有效，能让文字在盒子里水平居中；后者只对块级盒子有效，靠左右外边距自动均分实现水平居中。它们都不解决垂直问题——这正是现代 CSS 布局里 Flex 出场的原因。把这两个属性先分清楚，CSS 居中的逻辑就通了一半。

二、现代方案：Flex 与 Grid

Flex 和 Grid 是 2015 年之后主流的两种布局模型，也是今天最推荐的 CSS 居中手段。它们把「对齐」变成了一等公民，几行属性就能搞定。

2.1 Flex：最常用、容错最高

Flex 布局（弹性盒）的思路是：把父容器设成弹性容器，再用 justify-content 控制主轴对齐、align-items 控制交叉轴对齐。两个都设成 center，子元素就水平垂直都居中了。

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

上面这段做的是把 .parent 变成弹性容器，并让里面的子元素在两条轴上都对齐到中心。它的好处是不用管子元素宽高，内容变化也不会错位，所以日常开发里 CSS 居中首选 Flex。想深入弹性盒的各种对齐值，CSS3 教程里有完整的 flex 属性速查。

Flex 从 2015 年的 CSS3 起就成为标准，如今所有现代浏览器都原生支持，不必再加厂商前缀。只有当项目还要兼容 IE10 这类老环境时，才需要考虑 -ms- 前缀或退回老方案；正常业务里直接用上面的写法即可。

2.2 Grid：更简洁的写法

Grid 布局（网格）更狠，一行 place-items: center 直接双轴居中，语义也最清楚。

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

place-items 是 align-items 和 justify-items 的简写，设成 center 即双向居中。当你本就要用 Grid 排整个页面时，顺手居中某个元素用它最省事。

三、绝对定位 + transform 方案

在需要兼容很老的代码、或父容器不方便改成 Flex/Grid 时，绝对定位依旧是可靠的兜底方案。思路是：子元素相对父容器绝对定位到左上 50% 处，再用 transform 把自己往回拉一半。

.parent {
  position: relative;
  height: 300px;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这段做的是先把子元素左上角挪到父容器正中，再用 translate(-50%, -50%) 按自身宽高反向偏移，从而让中心对齐。它的优点是子元素脱离文档流、不影响兄弟元素；缺点是父容器必须 position: relative，否则会相对整个页面定位。涉及具体定位属性时，CSS 参考手册可以查到每个属性的取值细节。

另外，translate 是基于 GPU 的合成层变换，性能比直接改 top/left 更好，所以它也是做动画居中时的优选写法。

四、表格与 line-height 老办法

还有两类「老办法」，今天用得少，但看懂它们能帮你读旧项目。

表格法借用表格单元格天生垂直居中的特性：

.parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 300px;
}

line-height 法只适用于单行文本：把 line-height 设成和容器等高，文字就会在行内垂直居中。它们胜在兼容极老浏览器，败在语义不对（用表格做布局不符合现代规范），新项目不建议首选。今天表格法主要活在邮件 HTML 模板里——很多邮件客户端只认 table 布局，这时候它反而是唯一稳妥的居中手段。

五、总结：四种方法怎么选

一句话收束：CSS 居中没有唯一答案，只有最合适当前场景的那一种。把选型逻辑记牢，以后遇到布局对齐都不用再搜。

要点带走：

新项目、通用居中，直接用 Flex（justify-content + align-items 双 center），容错最高；
已经在用 Grid 排版的，顺手 place-items: center；
不能改父容器、要脱离文档流时，用绝对定位 + transform；
维护极老代码再用表格 / line-height 兜底。

补充一点：在响应式布局里，居中的父容器高度最好用 min-height 而非固定 height，这样内容变多时盒子会自动撑开，居中依然成立。下次再写页面，先想清楚「父盒子有没有、用不用 Flex」，CSS 居中基本一次就能成。

延伸学习

想把前端布局系统补齐，可以按这个顺序来：

先过一遍 CSS 教程里的盒模型、定位、浮动章节，把基础概念打牢；
想系统入门整条前端路线，前端开发零基础到项目实战是边学边练的形式，适合巩固；
不知道从哪门语言切入，可以看看前端开发方向给出的体系地图。

常见问题

Q：为什么我写了 Flex 还是不居中？ A：九成是父容器没有高度。Flex 的 align-items: center 只在父容器有明确高度时才看得出垂直居中效果，给 .parent 加一个 height 通常就解决了。

Q：居中用 text-align 还是 margin auto？ A：块级盒子水平居中用 margin: 0 auto，但它要求子元素有固定宽度；行内内容（文字）水平居中才用 text-align: center，两者不是一个维度，别混用。

Q：Flex 和 Grid 该学哪个？ A：两个都该会。Flex 适合一维的「一条轴上的排列」，Grid 适合二维的「行列同时排」，日常 CSS 居中 Flex 最顺手，复杂页面布局再上 Grid。系统学习可以沿着前端开发方向的路径循序渐进。