Flexbox实现盒子垂直水平居中方法

Flexbox是目前最可靠、最简洁的盒子垂直水平居中方案，只需为父容器设置display: flex并同时启用justify-content: center和align-items: center，子元素保持默认静态定位即可实现完美居中——无需额外尺寸声明、无需margin: auto或top/left偏移，甚至inline元素也能自动居中；但务必避免将flex布局与position: 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 容器和绝对定位混着用”——这是线上项目中最常导致居中失效的隐形原因。

理论要掌握，实操不能落！以上关于《Flexbox实现盒子垂直水平居中方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！