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 容器和绝对定位混着用”——这是线上项目中最常导致居中失效的隐形原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
