如何实现DIV盒子垂直水平居中_使用CSS Flexbox布局方案

Flexbox是最可靠的居中方案，父容器需设display: flex并同时使用justify-content: center和align-items: center；子元素须保持position: static，禁用absolute或float；IE10–11需加-ms-前缀，IE9及以下不支持。

Flexbox 是目前最推荐、最可靠的居中方案，只要父容器设对了 display 属性，子元素无需任何定位或尺寸声明就能居中。

父容器必须设 display: flex，且同时用两个属性

只写 justify-content: center 只能水平居中；只写 align-items: center 只能垂直居中。两者缺一不可。

• justify-content: center 控制主轴（默认是水平方向）上的对齐
• align-items: center 控制交叉轴（默认是垂直方向）上的对齐
• 如果父容器主轴被改成 column（flex-direction: column），那 justify-content 就管垂直，align-items 管水平 —— 容易反直觉，慎改

子元素不能设 position: absolute 或 float

Flex 子项一旦脱离文档流，就不再受 justify-content 和 align-items 影响。常见错误是给子元素加了 position: absolute 还指望它被 flex 居中。

• 子元素保持默认的 position: static 即可
• 不要手动写 top/left，也不要用 margin: auto 强行拉（虽然在 flex 里 margin: auto 也能居中，但属于冗余操作）
• 如果子元素本身是 inline 元素（比如 span），它依然会被居中 —— 不需要额外设 display: block

兼容性够用，但 IE10/11 需要加前缀

现代浏览器（Chrome/Firefox/Safari/Edge）都原生支持，但 IE10–11 对 flex 的实现不完整，align-items 在某些嵌套场景下会失效。

立即学习“前端免费学习笔记（深入）”；

• 必须加 display: -ms-flexbox 和 -ms-flex-align: center 才能在 IE10–11 正常工作
• IE9 及更早版本完全不支持 flex，别在这上面浪费时间
• 移动端 iOS Safari 从 9.0 起就稳定支持，无需担心

真正要注意的不是“怎么写”，而是“别把 flex 容器和绝对定位混着用”——这是线上项目中最常导致居中失效的隐形原因。