Flexbox实现div水平垂直居中的方法

使用 Flexbox 实现 div 的水平垂直居中，推荐在父容器上设置 display: flex，并配合 justify-content: center（控制主轴居中）与 align-items: center（控制交叉轴居中），同时确保父容器拥有明确高度，例如 min-height: 100vh，即可让子元素完美居中。

谈到借助 Flexbox 让一个 div 在页面内实现完美居中，实际上并没有想象中那么复杂。核心思路相当简洁：让父容器承担对齐的责任，子元素只需静静待在其中。你只需要针对包裹目标元素的父容器进行样式调整，就能轻松兼顾水平与垂直两个方向的双重居中。

具体怎样操作？请牢记下面这个黄金组合：

✅ 核心实现步骤

1. 激活父容器的弹性布局：为父容器添加 `display: flex`。
2. 搞定水平居中：设置 `justify-content: center`。在默认的横向主轴方向（row）下，该属性负责左右的水平对齐。
3. 搞定垂直居中：设置 `align-items: center`。同样在默认配置下，它负责上下的垂直对齐。
4. 给父容器一个“舞台”：这是关键步骤，必须为父容器指定一个明确高度，例如 `min-height: 100vh`。采用 `min-height` 比直接使用 `height` 更稳妥，能有效防止内容超出时被截断。

将这几步组合在一起，就是一套完整且稳定的代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 关键：提供垂直方向的对齐基准 */
  margin: 0;
  padding: 0;
}
.box {
  width: 200px;
  height: 200px;
  border-radius: 0.5rem;
  background-color: #dddddd;
}

代码写好了，但实际开发中总有几个容易踩坑的地方。我们来逐一梳理。

⚠️ 常见陷阱与避坑指南

• 父容器“隐形”了：如果忘记给 `.container` 设置 `height` 或 `min-height`，它的实际高度可能为零。这时 `align-items: center` 会失效——不是属性没生效，而是容器根本没有可供对齐的高度。
• 子元素“隔代”了：Flex 的对齐属性（例如 `align-items`）仅对直接子元素生效。如果 DOM 结构是嵌套的（如 `.container` > `.wrapper` > `.box`），那么 `.box` 不会受到 `.container` 的 `align-items` 控制。
• 主轴方向搞反了：若不小心设置了 `flex-direction: column`，那么 `justify-content` 就变成了控制垂直方向，而 `align-items` 反而变成控制水平方向。虽然也能实现居中，但逻辑上容易混淆。除非有特殊的布局需求，否则建议保持默认的 `row` 方向，用 `justify-content` 管水平、`align-items` 管垂直，这样最清晰。
• 兼容性小贴士：`justify-content` 和 `align-items` 在 IE10 及以上版本支持良好。但在 IE11 中，为确保高度能正确撑开，显式声明 `min-height: 100vh` 比依赖内容自动撑高更可靠。
• 关于简写属性：现代浏览器支持 `place-items: center` 这个简写（源自 CSS Grid Level 2），在 Flex 容器中，部分浏览器引擎会将其解析为 `justify-content: center; align-items: center`。不过，为获得最佳的兼容性和代码可读性，目前仍建议分开书写这两个属性。

? 进阶技巧：单子元素的极简方案

如果你的容器里有且仅有一个子元素，并且没有其他复杂的布局需求，还可以采用一种更简洁的写法：利用 `margin: auto` 的特性。

.container {
  display: flex;
  min-height: 100vh;
}
.box {
  margin: auto; /* 自动吸收所有可用外边距，实现二维居中 */
  width: 200px;
  height: 200px;
  background-color: #dddddd;
}

这种方法代码量更少。但需要注意，`margin: auto` 在 Flex 容器中生效的前提是，子元素没有设置 `flex-grow` 或 `flex-shrink` 等弹性属性，否则这些弹性属性会覆盖 `margin: auto` 的效果。

总而言之，`justify-content: center` + `align-items: center` + `min-height: 100vh` 这一组合，是目前最通用、最易理解、且兼容性最佳的 Flex 居中方案，完全可以作为前端开发中的首选默认方案来使用。