企业官网建设流程全解析

水平垂直居中，这四个字基本是每个前端面试的第一道送命题。我带过的新人里，十个有九个背了 flex 的三行代码，可真到开发时，遇到一个弹窗又不会写了——因为父容器高度是百分比算出来的，或者元素本身宽高不固定。其实“怎么居中”这个问题的答案不是一个技巧，而是你在什么布局上下文里。CSS 中水平垂直居中的实现方式不下十种，每一种都对应了不同的场景约束。这篇我就把这几种方式从头到尾捋一遍，每个方案的代码、原理、坑都会展开讲，你看完就能直接用。

1. 在讲方案之前，先把“居中”这件事拆明白

1.1 居中的本质：你在哪个“布局世界”里说话

很多新手写不出居中，不是不知道代码，而是没搞明白自己在哪个布局环境里。水平居中相对简单，块级元素用margin: 0 auto，行内元素用text-align: center，这两句话背下来就能应付绝大多数水平居中问题。但垂直居中不是这么回事，普通文档流里没有一个和text-align对称的属性，可以直接说“把这个块在垂直方向上放中间”。

为什么？因为 CSS 默认的块级排版，垂直方向的尺寸和位置是由文档流一个个推下来的，而不是像水平方向那样有“剩余空间自动分配”的机制。margin: 0 auto之所以可行，是因为块级元素在水平方向上有一个明确规则：如果左右 margin 都是 auto，并且元素宽度小于父容器宽度，那么剩余空间会被两边的 auto margin 平分。而垂直方向没有与之对应的“上下 margin auto 平分剩余空间”的规则，在普通文档流里上下 margin 设成 auto 会直接变成 0。

一旦切换到 Flexbox 或 Grid 布局世界，情况就变了。这两个现代布局模型引入了“主轴”和“交叉轴”的概念，默认就会把伸缩项或网格项分配在容器内，auto margin 也有机会参与剩余空间的分配。所以你会发现，很多居中方案的关键不是那句居中的代码本身，而是外层display属性的改变，这一步决定了你进入哪个“布局世界”。

1.2 拿到需求先问自己三个问题

我每次处理居中的需求，不会先想代码，而是先问自己三个问题：

第一个问题，子元素的宽高是已知的还是未知的？固定尺寸可以走负 margin 的路线，动态内容的弹窗只能依赖 flex、grid 或 transform 这类不关心尺寸的方案。

第二个问题，垂直方向的约束来自哪里？父容器有固定高度吗？还是高度由内容撑开？如果父容器根本没有高度，那垂直居中本身就没有考量的意义。

第三个问题，你的代码要跑在什么环境里？现代浏览器可以随便用 grid 和 flex，但如果你的项目里还有老掉牙的 IE 需求，那 transform 方案和 table-cell 方案就得纳入考虑。

这三个问题问完，方案基本就自动浮现了。接下来我按实际使用频率，把主流的几个方案全部过一遍。

2. 三个高频方案：Flex、Grid、绝对定位

2.1 Flex：最顺手，但别只记得三行代码

Flex 可能是我在实际项目里用得最多的居中方案，它最简单的写法长这样：

.parent { display: flex; justify-content: center; /* 主轴方向居中 */ align-items: center; /* 交叉轴方向居中 */ }

justify-content控制的是主轴方向，align-items控制的是交叉轴方向。主轴默认是水平方向，交叉轴垂直方向，所以这三行代码就是水平垂直居中。这里有个新人特别容易踩的坑：只写了display: flex和justify-content: center，子元素水平居中没问题，垂直方向却纹丝不动。原因在于 flex 容器默认的align-items是stretch，也就是让子元素在交叉轴上拉伸填满容器。你看到的内容没有居中，是因为子元素已经拉伸到和容器一样高了，再在容器内部“垂直居中”已经没有意义。解决办法就是显式地写align-items: center。

还有一点值得提，:place-items: center在 CSS 里也能用来居中，它是align-items和justify-items的简写。但在 flex 容器中，justify-items本身不参与布局计算，所以这个简写在 flex 环境下的语义并不完整。我自己的习惯是 flex 场景老老实实写justify-content+align-items，grid 场景才用place-items`。

Flex 方案最大的优势是，子元素宽高是什么都行，内容变多框架也不会变形；父容器的高度是动态的也行。它不依赖尺寸，不怕溢出，代码量又少，所以现在很多组件库的弹窗、抽屉默认就是用 flex 做的居中。

2.2 Grid：用place-items: center一行搞定

Grid 是在 flex 之后被我用得越来越多的方案，尤其当整个页面骨架就是网格布局时，居中往往是顺手的事：

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

place-items是align-items和justify-items的简写。align-items控制的是每个网格项在网格区域里的垂直对齐方式，justify-items控制水平对齐方式。都设成center，网格项就同时在两个方向上居中了。

这里要稍微注意一下，place-items和place-content在单个元素居中的场景下很容易被搞混。place-items是让网格项在自己的单元格内居中；place-content是把整个网格轨道作为一个整体去居中。如果一个网格容器里只有一个元素，这两种写法视觉上几乎一样。但如果网格里有多个格子、或者用了grid-template-columns划分了多列，它们的差别就很大了。我用下来最顺手的写法是：单元素居中直接用place-items: center；想控制多个网格项整体在容器里的位置才用place-content。

Grid 的居中方案还有一个隐藏优势：如果子元素设置了width: 100px这类固定宽度，place-items: center的网格项不会被拉伸，它保持自己的尺寸并居中；但如果给子元素写justify-self: stretch或align-self: stretch覆盖默认值，它又会铺满容器。这种行为的可预测性比 flex 好一些，适合做精细控制。

2.3 绝对定位加 margin: auto：老方案但依然能打

如果遇到浮动层、弹窗这类场景，并且父容器设置了position: relative，那我更愿意用绝对定位加 auto margin 的方式：

.parent { position: relative; } .child { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100px; height: 100px; }

这个方案的原理值得多说两句。当绝对定位元素的top和bottom同时设置了具体值，并且元素高度固定时，浏览器会这样理解：包含块的高度 = top + margin-top + height + margin-bottom + bottom。现在 top 是 0，bottom 是 0，height 是 100px，剩下来的高度去哪里？如果 margin-top 和 margin-bottom 都是 auto，那么剩余空间会被它们平分，所以元素视觉上就被推到了垂直中央。水平方向同理：left 和 right 是 0，width 是 100px，margin-left 和 margin-right 是 auto，剩余宽度被平分。

这个方案的优点是对内容尺寸的要求比负 margin 低很多，你只要不给死宽高、让内容自己撑开也行。我写过很多次弹层，结构就是外层 fixed 定位铺满全屏，内层用这个方式居中。它的兼容性也非常好，IE8 时代就有这个玩法了。要注意的是，子元素必须得有可分配的空间。如果你给子元素写了width: 100%或者inset: 0又把尺寸挤满，auto margin 没有剩余空间可分，自然就居中失败了。

3. 被低估的四个方案，以及它们的适配场景

3.1 绝对定位加负 margin：只在固定尺寸时靠谱

这个方案在移动端早期非常流行，现在代码库里还能看到不少类似写法：

.child { position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; }

它的逻辑很简单：先把子元素的左上角放到父容器中心点，再通过负 margin 往回挪自身尺寸的一半。问题也写在代码里了——你必须提前知道宽高是 100px，才能写出 -50px 的 margin。一旦内容是动态的，比如后端返回了一段不确定长度的文字，这个方案就废了。

所以我现在一般只在图片、图标这类固定尺寸的元素上用它，或者在一批高度统一的卡片里用它。另外一个变体是相对定位配合这个思路，但相对定位本身不脱离文档流，使用场景更窄，我就不展开了。

3.2 transform 位移：不知道尺寸也能居中的定位方案

不知道宽高，又不想依赖 flex 或 grid 的布局上下文，可以用 transform：

.child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

left: 50%和top: 50%把子元素的左上角放在父容器中心，translate(-50%, -50%)再把子元素往回平移自身宽高的一半。因为 translate 的百分比是相对于元素自身尺寸的，所以不需要知道子元素的宽高。

这个方案在弹窗和居中浮层里很好用，但它有两个要注意的点。第一，transform 会创建层叠上下文，对一个元素设置 transform 后，它的 z-index 基准会改变，可能影响后续定位。第二，如果同一个元素身上还要做别的 transform 动画，比如呼吸缩放、位移动画，那再叠加 translate 就会冲突，两者会互相覆盖。我的习惯是：如果这个元素本身没有动效需求，只管居中，那可以用 transform；如果要动，就老实切换到 flex 方案，把居中交给父容器，子元素只管自己的动画。

另外多一句，使用了 transform 居中后，如果父容器有overflow: hidden，而且子元素很高，可能出现上下被裁剪的情况。这个在 set 里踩过坑，后面常见问题部分我会细说。

3.3 table-cell 与行内块：老项目里的守旧派

如果你的项目里有大量基于表格布局的老页面，或者需要兼容到很老的环境，这两个方案可能会救你一命。

table-cell 方案是这样的：

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

display: table-cell会让这个元素表现得像表格里的一个单元格，单元格里的内容天然支持vertical-align: middle的垂直居中，text-align: center实现水平居中。我一般会给 parent 再套一层display: table的外壳，不然某些浏览器对直接设置宽高的 table-cell 元素宽度计算会有些奇怪。这个方案在 IE8 里都能跑，兼容性是顶级水平，缺点是 table-cell 本身不支持margin，布局拖拽能力很弱，加之内联元素间的空白符问题，现代项目里已经很少主动用它了。

行内块的方案稍微绕一点：

.parent { text-align: center; font-size: 0; /* 消除行内块之间的空白间隔 */ } .parent::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .child { display: inline-block; vertical-align: middle; font-size: 16px; /* 恢复子元素字号 */ }

原理是：::before伪元素的高度撑满父容器，并作为行内块参与基线对齐，然后子元素也用vertical-align: middle对齐到这一行的中间位置，于是看起来就是水平垂直居中了。这个方案不需要固定宽高，兼容性也不错，代价是代码结构复杂，而且要处理行内块自带的空隙问题，现在我已经很少用了，但如果你接手的是老站点，看到这种代码至少要知道它是在做什么。

3.4 文本和行内内容的居中，逻辑是另一套

很多人把图片、块级元素居中和文本居中混在一起记，其实文本居中的底层逻辑不一样。单行文本水平垂直居中很简单：

.box { width: 300px; height: 100px; text-align: center; line-height: 100px; }

水平方向是text-align: center，这个没争议；垂直方向靠的是line-height等于容器高度。因为每一行文本的行框高度是 line-height 决定的，当行框高度和容器高度一致时，文字在行框内天然的垂直方向上是居中的。但这里有个隐藏条件：这是单行文本。一旦内容变成两行三行，line-height等于高度的方案就会溢出，多行文本不能这么玩。

多行文本的居中处理，我一般会分两种情况。如果外层是 flex，直接给父级写align-items: center，文本块整体垂直居中。如果是在老项目里，就借助 inline-block 的vertical-align: middle，先把文本块包成 inline-block，再放进一个 text-align: center 的父容器里居中。很多搜索词里问到的“怎么调整 css 容器里的文本位置”，本质就是这几套逻辑的组合。

4. 各种方案的常见坑，我一个个踩给你看

4.1 未知尺寸内容，方案选择优先级

内容尺寸不确定是居中场景里最麻烦的情况。比如后端返回一段很长的介绍文字，比如用户头像要适配不同尺寸。这种情况下，负 margin 方案直接出局，绝对定位加负 margin 也是同样的命运。可用的是 flex、grid、绝对定位加 auto margin 和 transform 这四个方向。我个人的优先级是：flex 和 grid 优先，因为布局引擎自己推算尺寸最稳妥；transform 其次，适合不想引入 flex/grid 上下文的场景；绝对定位加 auto margin 放在第三位，因为代码结构要写一堆 top/right/bottom/left，有点啰嗦。反正从实战结果看，flex 和 grid 的出问题概率显著低于其他方案。

4.2 溢出和裁剪：transform 方案的隐形风险

用transform: translate(-50%, -50%)居中时，如果子元素的高度大于父容器，而且父容器设了overflow: hidden，会出现一个反直觉的现象：元素顶部被裁掉一块。原因是 transform 只是视觉上把元素挪上去了，但元素的布局盒仍然是从父容器中心点往下延伸的，一旦上半部分超出父容器边界，就会被 overflow 裁掉。

解决这个问题，我常用的字典是：不要把 overflow 直接写在父容器上，而是给父容器再加一层 wrapper，wrapper 负责 overflow: hidden，真正的居中结构放在 wrapper 内部。或者干脆换 flex 方案，因为 flex 容器默认会让 overflow 的表现更符合直觉。这个坑在写弹窗遮罩时特别容易踩，遮罩层本身 overflow 若设了 hidden，内容一长就会出现顶部被切断的奇怪现象。

4.3 移动端和动画场景下的隐藏坑

移动端上，flex 方案基本是主流，因为 iOS 和 Android 的现代浏览器都对 flex 支持得不错。但如果你要兼容特别老的 iOS Safari，比如 iOS 9 以下，flex 的老写法需要加display: -webkit-box等前缀，还是比较麻烦的。现在用户系统一般不会那么老，但企业内部一些老设备的 WebView 要额外注意。

动画场景里，transform 居中方案有一个很隐蔽的问题：如果子元素已经用了transform: translate(-50%, -50%)来居中，再给它加一个transform: rotate(...)或scale(...)的动画，动画会覆盖掉原有的 translate，元素一下子就跳到了左上角。我一般会把居中的逻辑尽量放在父容器上，用 flex 或 grid 解决，子元素单独留出自己的 transform 空间，这样动画变动就不会影响布局位置。

还有一个小细节：绝对定位加margin: auto的方案如果用于弹窗，要注意给弹窗设置max-width和max-height，并且搭配overflow: auto。如果不这么做，当弹窗内容超过视口尺寸时，上下边会被挤出可视区域，用户想滚动都找不到滚动条。可以说，所有定位类居中方案都需要考虑“内容超过容器时怎么办”这个问题，flex 和 grid 因为自带伸缩机制，风险会小一些。

4.4 隔着几层祖先：居中上下文要搞清楚

很多时候元素不在父元素里直接居中，而是要隔着好几层祖先。比如一个组件，最深层的文本要在整个页面的某个区域内居中，你给父容器写了相对定位，但中间层又被 transform 或 filter 影响，创建了新的包含块，绝对定位的参考对象就会变成中间层，而不是你以为的父容器。

这个问题的排查方法很简单：按祖先链一层层往上查，看哪个元素设置了position: relative、transform、filter、perspective、contain: layout这类属性。只要存在这些属性，它就可能是绝对定位元素的包含块。遇到这种场景，我的建议是把居中结构尽量扁平化，不要套太多层，不行就用 flex 直接在需要布局的那一层搞定。

5. 我的选择逻辑：不同项目不同历史包袱不同取舍

5.1 一套能直接用的判断流程

我这两年处理居中的思路已经稳定了。拿到需求先分三个维度：是不是单元素居中、宽高是否固定、宿主浏览器环境是什么。单元素居中优先 grid 的place-items: center；需要在多个子元素场景里做居中，用 flex；如果项目里有老 IE 或极端兼容需求，再回退到 table-cell 或行内块。宽高固定的图片图标，可以直接上绝对定位加负 margin；宽高不固定的弹层浮层，要么 flex 要么绝对定位加 auto margin；文本内容单行用line-height，多行用 flex 或行内块。

这个判断顺序不是绝对的，但基本能覆盖我日常遇到的九成场景。

5.2 一张表对比所有方案

5.3 给新人一个的练习思路

如果你现在还在死记硬背这些居中代码，我建议你换个练法。做一个需求：父容器宽高不定，子元素内容不定，要保持水平垂直居中且在内容增加时不被裁剪、不撑破布局。用 flex 做一遍，用 grid 做一遍，用绝对定位加 auto margin 做一遍，用 transform 做一遍。你会发现每个方案的代码在同样的需求下会产生不同的边界表现，这个过程比背十遍代码都有用。真正理解每个方案的局限之后，你不需要再搜“水平垂直居中”怎么写，因为看到布局需求的那一刻，脑子里会自动弹出对应的方案。

另外一个小习惯：在团队项目里，居中这种小东西也有“同一样式不要实现两次”的说法。很多团队都有自己的工具类，比如.flex-center、.grid-center这种全局类，建议你在项目里也沉淀一个，免得每个组件都写一遍三行 flex。我一般把这类基础布局类放到全局样式文件的第一层，团队所有人都默认使用，后面维护起来非常省心。

我个人在实际操作里的体会是，水平垂直居中这个题目之所以能成为经典面试题，不是因为它难，而是因为它能检验一个前端对布局模型的理解程度。你会背 flex 三行代码不算什么，能在不同场景里快速选对方案、知道每个方案的副作用，才是这题想考的。