Flexbox布局教程：div元素水平垂直居中的实现方法

Flexbox布局技术为元素居中提供了高效解决方案，只需几行CSS代码即可实现完美的水平垂直对齐效果。

使用 Flexbox 实现 div 水平垂直居中，只需在父容器上设置 display: flex，并配合 justify-content: center（主轴居中）与 align-items: center（交叉轴居中），同时确保父容器具有明确高度（如 min-height: 100vh）。

Flexbox作为现代CSS布局的重要工具，其核心优势在于将居中逻辑交由父容器控制。要实现.box在.container中的完美居中，必须将Flex属性应用于.container这个弹性容器，而.box则自动成为弹性项目。

✅ 正确实现步骤

1. 将父容器设为 Flex 容器：display: flex
2. 启用主轴居中：justify-content: center（默认主轴为水平方向，控制左右居中）
3. 启用交叉轴居中：align-items: center（默认交叉轴为垂直方向，控制上下居中）
4. 确保父容器有可参考的高度：推荐使用 min-height: 100vh（比 height: 100vh 更安全，避免内容溢出时被截断）

以下是完整、健壮的示例代码：

.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;}

⚠️ 常见陷阱与注意事项

1. 父容器高度塌陷：若 .container 未设置 height 或 min-height，其实际高度可能为 0，导致 align-items: center 失效——视觉上"未居中"，实则是无空间可居。
2. 子元素非直接子节点：Flex 对齐属性（如 align-items）仅作用于直接子元素。若 DOM 中存在嵌套 wrapper（如
   ），则 .box 不受 .container 的 align-items 控制。
3. 主轴方向干扰：若误设 flex-direction: column，则 justify-content 将控制垂直方向，align-items 反而控制水平方向。此时仍可居中，但语义易混淆；建议保持默认 row，统一用 justify-content 管水平、align-items 管垂直。
4. 兼容性提示：justify-content 和 align-items 在 IE10+ 中支持良好；但若需在 IE11 中确保高度撑开，建议显式声明 min-height: 100vh 而非依赖内容撑高。
5. 进阶替代写法：现代浏览器可使用 place-items: center（CSS Grid Level 2），语法更简，且在 display: 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 等弹性属性，否则将被覆盖。

Flexbox的居中方案以其简洁性和可靠性成为现代网页布局的首选，掌握其核心原理和实现技巧能显著提升开发效率。