CSS垂直水平居中8种方法详解：从传统到现代布局的全场景指南

做前端的，十个有九个被同一件事卡过：把一个元素在页面上弄成水平垂直居中。明明感觉没什么难度，一写起来就是“差几个像素”“这个属性怎么没生效”“换个浏览器又乱了”，最后只能对着 DevTools 怀疑人生。CSS 的垂直水平居中之所以折磨人，本质上是因为这门语言早期设计的时候，就没有专门给“居中”规划一套完整方案，再加上块级元素和行内元素的布局规则完全不同，水平方向好办，垂直方向一直靠“借力打力”。这篇文章我从实际工作里抽出真正用得上的 8 种垂直水平居中方法，每一种都会讲清楚原理、代码、适用场景和踩坑点。不管你是刚写完一个导航栏的新手，还是做了几年页面但遇到居中场景总想翻资料的老人，这 8 种方法基本能让你在所有项目里见招拆招。

1. 为什么“居中”在 CSS 里这么难？

1.1 先搞懂块级元素和行内元素的本性

想要真正理解居中，不能只背代码，得先知道浏览器是怎么摆放元素的。我们页面里的元素大致分两类：一类是块级元素（div、p、section 这类），特点是默认占满父容器一整行，宽度撑满，高度由内容撑起；另一类是行内元素（span、a、img 这类），它们不会独占一行，而是从左到右一个挨一个排，宽度由内容本身决定，高度和行高体系挂钩。这两种元素在父容器里的排版逻辑完全不同，直接导致水平居中和垂直居中的难度差距非常大。

水平居中，对块级元素来说最简单的一件事就是 margin: 0 auto，因为块级元素有明确的宽度参与计算；对行内元素也可以用 text-align: center 让它在父容器里水平居中。但垂直方向就不一样了：块级元素在默认文档流里是自上而下排列的，父容器的高度往往是由内容撑起来的，没有“剩余空间”这个概念，你就没有条件去计算“把元素放到中间还剩多少高度”。垂直居中之所以绕，绕就绕在“剩余空间”的分配上。

1.2 垂直居中的历史遗留问题

CSS 1.0 和 CSS 2.0 的时代，布局模型只有普通流、浮动和定位，没有 flexbox 也没有 grid。当时想实现垂直居中，几乎只能用一些“借力”的手段：用 table 布局的 vertical-align，或者用 line-height 把行高撑到和容器一样高，再或者用绝对定位配合 top: 50% 做粗略位移。这些方法都不是专门为居中设计的，而是各取所长：table 的单元格天然拥有居中能力，line-height 能改变行内内容的排布基线，绝对定位可以精确计算坐标。这也解释了为什么后来的 flex 和 grid 一出现，前端圈会有那么大的反应——因为“居中”这个一直被当成 hack 来处理的事，终于有了正经方案。

但这不意味着老方法就该被扔掉。在实际项目里，你可能会遇到各种各样的情况：要兼容老浏览器、不能用 flex 影响布局结构、某个组件就一行文本不想包外层 div、容器宽高可能变化……每一种约束下，能派上用场的方法都不一样。所以我才说，8 种方法都要会，不是为了显得厉害，而是因为你真的不知道下一个需求会卡在哪种条件上。

1.3 8 种方法总览

先把这 8 种方法列个表，让大家心里有个底。后面每一章都会用代码展开说明。

注意：表格里的兼容性指的是该方案最保守的可用版本，实际使用时还要结合你自己的浏览器支持范围来取舍。

2. 传统排版流派：三种“老却很稳”的居中方案

2.1 行高法：text-align + line-height

先从小场景说起：一个按钮，里面一个 span 文字，要求无论按钮高度多少，文字始终在正中间。最直接的做法是给容器设置 text-align: center 让文字水平居中，再给容器设置一个和高度相等的 line-height，让文字的行盒在垂直方向也被“撑满”。举个例子：

css复制.btn {
  width: 160px;
  height: 48px;
  background: #4e8cff;
  color: #fff;
  text-align: center;
  line-height: 48px;
}

html复制<div class="btn">确定</div>

这里的关键是 line-height 和 height 相等，例如容器高 48px，行高也设 48px，浏览器会把这一行文本的行盒高度撑到 48px，行内内容在行盒内部默认垂直居中，视觉上文字就在容器中心了。这个方法的优点非常明显：零额外元素，代码量最少，性能最好；缺点是只适用于单行文本，如果内容换行成两行，行盒依然只有一行 line-height 的高度，第二行就直接溢出到容器外面去了。

如果非要在这个思路下处理多行，有个妥协办法：把 line-height 设成正常值（比如 1.5），再给文本容器加 display: table-cell 或使用稍后要讲的 flex 方案，不要硬用行高法。我自己的习惯是：单行图标按钮、面包屑、tab 选项这类场景，行高法永远是首选，因为你不需要为了居中多包一层元素，也不用担心布局模型的改变影响周边元素。

2.2 table-cell 法：继承自表格布局的居中神器

table 布局是 CSS 还没成熟时页面排版的主力，虽然现在没人再用 table 做整页布局，但表格单元格的 vertical-align 对齐能力是真的好用。做法是让父元素模拟表格（display: table），让子元素模拟表格单元格（display: table-cell），再给子元素设置 vertical-align: middle 和 text-align: center，子元素内部的内容就自动水平垂直居中了：

css复制.parent {
  display: table;
  width: 100%;
  height: 400px;
}
.child {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

html复制<div class="parent">
  <div class="child">
    这里可以是多行文本，<br>
    也可以是一张图片，<br>
    甚至是一整个表单块。
  </div>
</div>

为什么这样能居中？因为表格单元格本质上是一个独立的内部排版上下文，vertical-align 是表格单元格里真正的“垂直对齐工具”，它会把单元格内的内容块按照中线对齐。这种方案最大的好处是“多行内容也能稳居中”，而且有很多老项目要兼容 IE8，这几乎是唯一不用 flex 却能优雅处理多行居中的路子。缺点也比较明显：display: table 的元素默认宽度和高度都“由内容决定”，父级需要显式设置宽度，否则它可能只占内容宽度，整页布局时会因为宽度计算方式不同带来意想不到的换行和文本溢出现象。

所以用这个方法时有一个细节必须留意：父元素的 width 一定要写清楚，一般情况下写 100%，如果你希望它和某个兄弟元素比例一致，也要显式分配。table-cell 方案写起来有点绕，但它是传统方案里最能“打”的，尤其是在做一些老后台系统、邮件模板的时候，优先考虑它。

2.3 伪元素 + inline-block + vertical-align：兼容性最强的“多行文本居中”

还有一种方案，对多行文本的垂直居中特别好用，而且兼容性甚至能到 IE7——它是利用伪元素制造一个高度 100% 的 inline-block 辅助元素，把父容器的“垂直中线”顶出来，再用 vertical-align: middle 让真正的子元素在基线上对齐。具体代码长这样：

css复制.parent {
  height: 400px;
  text-align: center;
}
.parent::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.child {
  display: inline-block;
  vertical-align: middle;
  max-width: 80%;
}

html复制<div class="parent">
  <div class="child">
    多行文本没问题，<br>
    高度变化也没问题，<br>
    老浏览器也能跑。
  </div>
</div>

原理其实不复杂：伪元素是一个高度等于父容器高度、宽度为 0 的 inline-block，它本身参与行内排布，会把整行的“基线”顶到容器垂直中心附近，然后子元素在这个行内上下文里用 vertical-align: middle 对齐。父级的 text-align: center 负责水平居中，子元素是 inline-block，宽度收缩到内容大小，再给个 max-width 防止超宽溢出。这个方案和 table-cell 最大的不同是，它不需要改变父元素的 display，布局结构上的副作用更小；但它引入了一个看不见的伪元素，如果父级本身就用了 ::before 做别的样式（比如气泡三角、图标字体），就得考虑优先级冲突。

我个人觉得，这个方案在“又要多行文本垂直居中，又不想用 flex 影响整体布局”的时候特别管用。因为 flex 毕竟是现代布局模型，一旦设了 display: flex，子元素的 float、margin 合并、宽度计算都会发生连锁变化，而伪元素 + inline-block 是在普通文档流内部完成的居中对齐，对老布局的侵入性要小很多。不过代码不太好记忆，所以我通常把它整理成一个工具类放进全局样式里，而不是每次手写一大坨。

3. 绝对定位流派：三种适合弹窗和遮罩的玩法

3.1 绝对定位 + 负 margin：宽高已知时的精确方案

绝对定位是 CSS 里“现在就要精确坐标”的终极手段。它的原理是用 left 和 top 将元素的左上角定位到父容器的 50% 位置，然后通过负 margin 把元素自身宽高的一半拉回去，让元素中心点正好落在容器中心。代码很好写：

css复制.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 100px;
  margin-left: -100px;
  margin-top: -50px;
}

这里 width 200px，margin-left 就是 -100px；height 100px，margin-top 就是 -50px。计算规则是：先用 left: 50% 把元素的左边缘挪到父容器横向中点，再用负 margin 把元素往左拉回自身宽度的一半；top 方向同理。这种方案的优点是非常精确，元素的正中心不会有任何像素偏移，也不受字体、间距影响；缺点是元素尺寸必须写死，一旦内容是动态的（比如后端返回的文字长短不一），负 margin 拉回的一半就不对了，居中就会偏。

这也是很多新手第一次写弹窗时最容易写错的地方：只记得 left: 50%，忘了 margin-left 是负的，结果弹窗的中心点跑到了容器右下角附近。另外还要强调一点，父容器必须设置 position: relative 作为定位上下文，否则子元素就会相对于最近的定位祖先（通常是视口）定位，页面里看起来就是弹窗跑到屏幕外面去了。我见过不少人是真的漏了这一句，然后在后面怀疑自己的负 margin 算错了。

3.2 绝对定位 + transform：宽高未知时的动态方案

绝对定位 + 负 margin 最大的痛点是尺寸写死，那有没有一种办法既能用绝对定位，又不需要知道元素宽高？有——用 transform: translate 代替负 margin。translate 的百分比是相对于元素自身尺寸计算的，所以 translate(-50%, -50%) 天然就是“把自己向左平移自身宽度的一半、向上平移自身高度的一半”，和容器宽不宽、元素高不高都没有关系：

css复制.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

这段代码是现在做居中弹层最经典的写法之一。它和负 margin 方案的区别，除了不需要知道宽高之外，还有一个隐藏的小差异：translate 是在元素自身坐标系里做位移，不影响它原本在文档流里占据的空间，所以也不会引起周边元素的重新排布。对绝对定位元素来说，这个差异不大；但如果用在静态元素上，就能明显感觉到它不会像 margin 那样“挤开”其他内容。

当然它也有自己的坑。第一个是 transform 会创建新的层叠上下文和包含块，如果你在这个居中的元素内部又放了 position: fixed 的子元素，那个子元素的定位参照可能会变化，行为和预期不一样。第二个是兼容性，IE9 支持 transform，但 IE8 不支持，如果你的项目要兼容到 IE8，用回负 margin 更稳妥。还有一点很多开发者没注意到：transform: translate(-50%, -50%) 过程中，元素会发生亚像素渲染，在文字比较小的时候可能出现字体模糊的错觉，但这通常只会在特殊字体或低分辨率屏幕上比较敏感，普通需求可以忽略。

3.3 absolute + inset: 0 + margin: auto：自动分配剩余空间的另一面

如果说前两种绝对定位方案是“手动把元素拉回中心”，那么第三种方式更像“让浏览器帮我分配空间”。它的代码非常短：

css复制.parent {
  position: relative;
}
.child {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 200px;
  height: 100px;
}

inset: 0 其实是 left: 0; right: 0; top: 0; bottom: 0 的简写，把子元素的上下左右都钉在父容器的四个边缘，再配合 margin: auto，浏览器就会把剩余空间在所有方向上平均分配，元素自然就居中了。这里有一个容易困惑的知识点：在定位元素中，margin: auto 的行为和普通块级元素不一样，普通块级元素的 auto 只对水平方向有效，而定位上下文中，只要 left/right 和 top/bottom 都设置了确定值，垂直方向的 auto margin 也会自动分配。

这个方案的优点是代码足够简洁，且不需要用 transform 或手动计算，看起来非常优雅。但要注意两个限制：一是子元素必须给出显式的宽度和高度，如果没有 width 和 height，auto margin 无法计算可分配空间，元素会直接拉伸到填满父容器；二是兼容性上，inset 是较新的简写属性，老浏览器不认识，如果要用得更保守，写成 left: 0; right: 0; top: 0; bottom: 0 也行。我个人用它来写遮罩层中间的内容区特别顺手，结构清晰，后期维护时一眼能看懂意图。

3.4 三种绝对定位方案怎么选

这三种方案放一起，看起来很像，实际上各有各的适用语境。尺寸永远不变的内容，比如一个固定大小 200×100 的图片预览框，用负 margin 最稳；尺寸会根据内容变化的内容，比如接口返回的报错信息，用 transform 最游刃有余；项目整体采用现代语法，不需要兼容老浏览器的居中卡片，用 inset + margin auto 最省事。我做了一个简单对比：

绝对定位三个方案还有一个共同的注意点：父元素必须是定位元素。如果你发现写完这段代码后子元素跑到了屏幕中间而不是父容器中间，第一件事就是检查父容器有没有 position: relative。另外，绝对定位会让子元素脱离文档流，如果父容器的高度本来由子元素内容撑起来，一旦子元素绝对定位，父容器高度会塌陷成 0，这会让页面排版整体“崩溃”。这种情况要么给父容器固定高度，要么用 flex/grid 方案来替代，不要在同一个需求里硬扛。

4. Flex 与 Grid：现代布局里的两把利刃

4.1 Flex + justify-content + align-items

Flex 出来后，居中这个问题才真正有了“一句话方案”。核心代码是：

css复制.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

html复制<div class="parent">
  <div class="child">内容</div>
</div>

flex 容器内部有两条轴：主轴和交叉轴。默认情况下主轴水平、交叉轴垂直，justify-content: center 控制主轴上的居中，align-items: center 控制交叉轴上的居中，两条轴同时居中，就是水平垂直居中了。如果你把 flex-direction 改成 column，主轴会变成垂直，那么居中的含义也会跟着调换方向，但写起来还是一样顺手。

flex 方案在绝大部分现代网页里已经是我默认的最优先选择，原因有三个：第一是完全不关心内容的宽高，多行多列都能处理；第二是子元素的尺寸可以被内容撑开，不用写死；第三是对布局的侵入性比绝对定位小得多，虽然父容器变成了 flex 容器，但子元素依然在文档流里参与排版。当然，flex 也不是没有坑——如果父容器本身就依赖 width: 100% 且内部有多个子元素，设置 flex 后宽度分配会受 flex-shrink 影响，可能导致个别子元素被压缩。此时可以给真正的居中元素加上 flex: 0 0 auto，或者用 margin: auto 来处理。

还有一个很有用的细节：flex 容器中，如果给子元素单独设置 margin: auto（比如 margin-left: auto），它会“推开”主轴方向的其他空间，把子元素推到边缘。很多导航栏的 logo 靠左、操作按钮靠右，就是靠这个技巧实现的，不需要再去套一堆 justify-content: space-between 的规则。

4.2 Grid + place-items：一站式对齐

Grid 出现得比 Flex 晚，但它提供的居中能力比 Flex 还要直接。Flex 要写 justify-content 和 align-items 两条，Grid 直接一个 place-items 就能搞定：

css复制.parent {
  display: grid;
  place-items: center;
}

html复制<div class="parent">
  <div class="child">内容</div>
</div>

place-items 是 align-items 和 justify-items 的简写，align-items 控制垂直方向，justify-items 控制水平方向，都设为 center，单元格里的内容就自动居中了。如果你希望子元素填满整个网格区域，还可以把 place-items 换成 place-content 或 place-self，后面这两者控制的是网格轨道自身的对齐，不常用但一旦遇到“子元素铺满格子但内容居中”的情况就很好使。

Grid 方案在“整页居中”这种需求下特别有优势。比如做一个 404 页面，要让整个页面内容在屏幕中央，传统做法是给 body 设一个高度、再 flex 或绝对定位；用 Grid 的话，body 设 display: grid，再直接 place-items: center，所有子元素自动居中，代码量极少。更妙的是 Grid 天然支持多列和多行布局，如果你不仅要居中一个元素，还要在它周围排布一些附加信息（比如登录框左侧有 logo 文字，右侧有背景图），用 Grid 画一个隐形的两列两行框架，元素想放在哪个单元格就放在哪个单元格，比 Flex 嵌套要清晰很多。

4.3 Flex 和 Grid 到底该选谁

我的判断标准很简单：如果你只需要居中一个或少数几个元素，优先 Flex，因为它心智负担低、性能也足够；如果你是在做整个页面的骨架布局，比如主体区域、侧边栏、页头页脚的排布，优先 Grid，因为 Grid 的二维布局能力可以同时管理行和列。两者还有一种常见组合：外层用 Grid 做页面骨架，内层用 Flex 做单个组件的排列，这种嵌套使用在实际项目里最自然。

还要补充一个容易被忽略的点：Flex 和 Grid 都会改变元素的布局上下文。容器一旦设了 display: flex 或 grid，子元素就不再遵守普通的块级排版规则，比如 float 会失效、margin: auto 的行为会改变、通配符选择器 * { margin: 0 } 的影响也会被重新分配。所以当你把一个页面里已有的容器改成 flex 时，一定要打开 DevTools 检查一下子元素宽度，特别是那些用了宽度百分比或 float 布局的旧代码，很容易因为上下文切换而“炸掉”。

5. 8 种方案横向对比与选型指南

5.1 一张表看清所有方案的关键差异

纸上谈兵结束，到了真正做技术决策的时候。把 8 种方法放在一起横向对比，能帮你快速锁定适合手头需求的方案：

要注意，“多行文本”那一列里的“—”，不代表绝对不行，而是这些方案本身是为块级元素居中的，多行文本会有额外处理成本。比如绝对定位方案，只要子元素是块级容器，内容多行一样能居中；真正不适合多行的是行高法。

5.2 选型决策树：三步锁定方案

如果你看完表格还是不知道怎么选，我给你一个更直观的决策路径，按顺序往下判断就行：

• 第一步：你的项目要兼容 IE8 吗？要兼容，直接放弃 Flex 和 Grid，在 table-cell 与伪元素 + inline-block 里选一个。单行文本且内容固定，用行高法也行。
• 第二步：你的元素是“弹窗/遮罩层”吗？是，优先考虑三种绝对定位方案。内容宽高固定选负 margin，内容动态选 transform，现代浏览器项目选 inset + margin auto。
• 第三步：如果你的项目浏览器都支持 Flex/Grid，就不要再折腾传统方案了。单个元素居中用 Flex，整个页面骨架或复杂二维布局用 Grid。绝大部分情况下，这最后一步就直接结束了。

我实际工作里，很多朋友会在“明明可以用 Flex 但偏要写绝对定位”的情况里纠结，原因往往是怕 display: flex 影响布局结构。但 flex 对文档流的侵入比绝对定位小得多，绝对定位会让子元素脱离文档流、父容器高度塌陷，flex 不会。与其为了“不影响结构”而选择绝对定位，不如先用 flex，真出现布局差异再微调。这个观念转过来之后，居中代码的维护性会提升一个台阶。

5.3 团队协作中的统一选型经验

讲个我踩过的坑：团队项目里，A 同事用 flex 做居中，B 同事用绝对定位做同一个模块，最后代码合到一起，样式互相干扰，中间调了半天才发现两种方案对父元素高度的影响完全不同。所以我觉得，比“学会 8 种方法”更重要的是“约定团队里优先用哪几种”。我现在的建议是在代码规范里写三条铁律：

• 现代项目默认使用 Flex 居中，只有 flex 解决不了的时候才上绝对定位；
• 页面骨架用 Grid，组件内部排列用 Flex，不混用；
• 涉及动态宽高、弹层场景，统一用绝对定位 + transform，避免负 margin 的维护负担。

这三条不是什么高级技巧，就是最朴素的工程经验。CSS 的方案很多，但一个项目里方案越统一，维护成本越低。你要的不是“会写 8 种”，而是“知道该用哪一种”。

6. 常见问题与排查技巧实录

6.1 明明写了居中，为什么没生效？

这是 CSS 社区提问率最高的问题。每次接到类似的咨询，我都会让他们按下面这个顺序排查，基本两次内能定位问题：

• 父容器有没有固定高度？如果父元素的高度是 0 或者由内容撑开，垂直居中就没有可分配的“剩余空间”，你怎么写都看不到效果。最常见的症状是子元素在 DevTools 里明明有居中样式，但视觉上还贴在顶部。解决办法是先给父容器设一个 height 或 min-height。
• 子元素是不是块级元素但没设宽度？绝对定位方案和 margin auto 方案对显式宽度有硬性要求，缺了 width，子元素会被拉伸宽度，导致视觉上“居中失效”。
• 定位上下文对不对？用了 absolute 却忘了给父元素加 position: relative，子元素相对视口定位，页面一滚动就“飘”走了。
• 是不是被浏览器默认样式覆盖了？比如 button 或 input 这类表单元素自带垂直对齐规则，需要先重置掉，再套用你的居中样式。

这四条查完，90% 的“没生效”问题都能解决。还有一个特别隐蔽的坑：父容器如果同时设了 display: flex 和 line-height，子元素可能会同时受到父级行高继承的影响，导致文字偏下，这时候把子元素的 line-height 设为 normal 就能回归正常。

6.2 多行文本垂直居中的专项问题

行高法遇到多行文本基本就是废的，这是最经典的一个坑。文字一变多，容器高度还是原来的固定值，line-height 没有随之增高，第二行就溢出了。处理多行文本有两条路：一是前面讲过的 table-cell 方案，兼容老浏览器，但要注意给父容器写死宽度；二是用 flex 方案，把 display: flex 和 align-items: center 配合起来，无论几行文本都能稳居中，而且不用考虑 line-height 继承。

还有就是文本换行导致的“居中偏下”：margin: auto 方案居中一个内联文本节点时，文本本身可能带着上下留白（行高的一半），视觉上会偏下几个像素。这种时候不要死调 margin，直接用 flex 的 align-items: center 最省心，因为 flex 的对齐是基于内容盒的，不受行高上下留白影响。

6.3 transform 和负 margin 的“隐形副作用”

transform 和负 margin 是绝对定位流派里最容易引发认知偏差的两个属性，我把它们各自的隐形副作用单独拎出来讲。

负 margin 的副作用是会影响兄弟元素。margin 本来就有挤压周边空间的能力，哪怕是负值，也会把周围的元素往自己方向拉。如果你在一个弹性布局里用了负 margin 做居中，很可能会把旁边的元素也带偏。transform 的副作用则是前面提过的：它会创建层叠上下文和新的包含块，影响内部 position: fixed 子元素的定位基准；另外 transform 的属性值会在 GPU 合成层上处理，个别情况下，一个页面里大量使用 transform 会导致内存占用偏高，尤其在低端机上做滚动列表时容易掉帧。

所以我在项目中有一个不成文的约定：能用 margin、padding、flex 解决的对齐，坚决不用 transform；只有在动态尺寸弹层这种确实需要“百分比位移”的场景才用 translate。这样做的原因是让样式的副作用尽量局限在最小范围，出问题的时候好排查。

6.4 调试居中样式的一套好使的手法

最后分享一个我每天都在用的调试套路。当你觉得居中样式写得对但视觉不对时，先在 DevTools 里给元素加 outline: 1px dashed red，再看盒模型。outline 不占据布局空间，能让你看清元素真实的位置和尺寸，排查“元素是不是比父容器还大”“边框被 padding 挤到哪了”这类问题非常高效。其次，检查 Elements 面板里父元素的计算高度，很多垂直居中失效的根源就是父容器的高度不是你以为的那个值。另外，切换一下设备模拟模式，在窄屏和宽屏下分别看一眼，很多居中问题其实是容器百分比宽度和内容最小宽度之间的冲突造成的，只在特定屏幕宽度下出现。记住这三招，你在 DevTools 里反复试错的时间能减少一半以上。

最后再说点题外话

做 CSS 这么多年，我的体会是：居中这件事本身没有多难，难的是每个方案背后都有一堆隐藏的边界条件。行高法看起来简单，换行就崩；绝对定位很精确，尺寸一变就偏；flex 很方便，老浏览器不认；grid 很强大，团队不一定熟悉。所以我才会把 8 种方法都整理出来，而不是只推荐一个。你用得越久越会发现，真正的“最佳方案”取决于你的项目约束：目标浏览器、页面结构、内容是否会变、团队维护习惯。如果非要说一个我的个人偏好，那就是现在的新项目一律 Flex 起步，遇到弹窗遮罩就上绝对定位 + transform，遇到整页骨架就开 Grid。至于老项目，table-cell 和伪元素方案永远是兜底的神。希望这份梳理能让你少踩几个坑，如果你也有某个自己惯用的居中方案，欢迎在评论区和我聊聊，看看我们是不是踩过同一道坎。