Flexbox水平垂直居中需父容器设display: flex、justify-content: center和align-items: center，并确保父容器有明确高度；常见失效原因包括未设flex、父容器无高度或子元素脱离Flex上下文。
Flexbox水平居中用 justify-content: center
父容器设为 display: flex 后，justify-content 控制主轴（默认是水平方向）上的对齐方式。center 值会让所有子元素在主轴方向上等距居中，不依赖子元素宽度或数量。
常见错误是忘记设置父容器的 display: flex，或者误以为它能影响单个子元素的定位——它作用于整个行/列的布局分布。
- 主轴方向可被
flex-direction改变：若设为column，justify-content: center就变成垂直居中 - 只对直接子元素生效，嵌套 Flex 容器需各自设置
- 避免和
margin: auto混用，可能产生意外偏移
Flexbox垂直居中必须配 align-items: center
align-items 控制交叉轴（与主轴垂直的方向）上的对齐。默认主轴是 row，所以交叉轴就是垂直方向，此时 align-items: center 才能真正让子元素垂直居中。
容易忽略的一点：如果父容器高度未明确（比如靠内容撑开），align-items: center 看似无效——因为容器本身没高度，子元素自然“掉”在顶部。
立即学习“前端免费学习笔记（深入）”；
- 确保父容器有明确高度，例如
height: 100vh或min-height: 200px -
align-items对单行或多行都有效；多行时建议改用align-content: center（但仅当存在换行且有多行时才起作用） - 若子元素是块级且设置了
height，align-items: center仍按内容盒居中，不是按 margin box
同时水平+垂直居中只需两行CSS
只要父容器是 Flex 容器、有确定尺寸、子元素是直接子项，两行声明就足够：
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 300px; /* 必须有高度 */
}不用计算 transform，不依赖 position: absolute，也不需要额外 wrapper 元素。
- 如果子元素是内联元素（如
<span>），默认会参与 Flex 布局，无需额外设置display - IE10–11 对
align-items在某些场景下支持不稳定，若需兼容，建议加-ms-flex-align: center - 注意
align-items是父容器属性，不是子元素的；写在子元素上完全无效
为什么有时候居中“失效”？重点检查这三点
绝大多数“居中不工作”的问题，其实出在三个地方，而不是属性写错了：
- 父容器没设
display: flex—— 这是最常见的遗漏 - 父容器高度为
auto且无内容撑开 —— 浏览器计算出的高度是 0，子元素再怎么居中也看不见 - 子元素用了
float、position: absolute或display: block以外的复杂布局（如 grid 子项嵌套），导致脱离 Flex 格式化上下文
Flex 居中本身很可靠，但它的效果严格依赖容器尺寸和子元素是否真正属于该 Flex 上下文。调试时优先看 computed styles 中父容器的 display 和 height，比反复改 justify-content 更快定位问题。
