Flex水平垂直居中需父容器设display: flex、justify-content: center和align-items: center，且必须有明确高度（如height: 100vh），否则align-items垂直居中失效；子元素不可设position: absolute，避免脱离flex流。
display: flex 是现代 CSS 中实现水平垂直居中的最直接方式，只要父容器高度明确、子元素不干扰布局，三行代码就能稳稳居中。
Flex 居中必须满足的两个前提
很多人写了 justify-content: center 和 align-items: center 却没效果，问题往往出在这两点：
- 父容器没设置高度（比如
height或min-height），align-items: center在“无限高”容器里无法计算垂直位置 - 父容器用了
display: flex，但子元素又设置了position: absolute—— 绝对定位元素会脱离 Flex 流，不再受align-items控制
justify-content 和 align-items 到底控制哪根轴？
Flex 默认主轴是水平方向（flex-direction: row），所以：
-
justify-content: center对齐的是主轴 → 水平居中 -
align-items: center对齐的是交叉轴 → 垂直居中 - 如果改成
flex-direction: column，两者的含义就互换：前者变垂直居中，后者变水平居中
多行内容时，align-content 和 align-items 的区别
当子元素换行（flex-wrap: wrap）后，align-items 仍控制每行内项目的垂直对齐；而 align-content: center 才真正让“所有行整体”在交叉轴上居中。
- 单行场景：只用
align-items: center就够了 - 多行且希望行组居中：必须加
align-content: center，否则各行顶部会贴着容器顶边 -
align-content对单行无效，此时它不起作用
IE10/11 下 Flex 居中需要加前缀吗？
2026 年绝大多数项目已无需兼容 IE，但若真要支持 IE10–11：
立即学习“前端免费学习笔记（深入）”；
-
display: -ms-flexbox（注意是-ms-，不是-webkit-） -ms-justify-content: center-ms-align-items: center- 别忘了给父容器加
height，IE 下这点比现代浏览器更严格
实际开发中，除非维护老系统，否则直接写标准属性即可 —— display: flex 在 Chrome/Firefox/Safari/Edge 中已无兼容性障碍，反而加前缀可能引入 bug。
