flex容器中justify-content仅作用于主轴，align-items作用于交叉轴；主轴方向由flex-direction决定，默认row时主轴为水平，故justify-content:center仅水平居中，需配合align-items:center实现完全居中。
flex 容器的 justify-content 对主轴起作用，但内容没动？
这通常是因为你默认以为主轴是垂直方向，而 flex-direction 实际是 row（默认值），即水平主轴。此时 justify-content: center 只会水平居中，对垂直方向无效。
-
justify-content控制的是「主轴」上的对齐，不是“整体居中” -
align-items才控制「交叉轴」上的对齐，也就是垂直方向（当主轴为row时） - 如果改了
flex-direction: column，那主轴变成垂直，justify-content就管垂直了，align-items管水平
为什么加了 justify-content: center 还是靠左？
常见于容器高度未显式设置，或子元素未脱离文档流（比如子元素是 float 或 position: absolute）。Flex 居中只对 display: flex 容器的直接子元素生效。
- 确认子元素没有
margin: auto冲突（它在 flex 中有特殊行为，可能覆盖justify-content） - 检查是否意外设置了
flex-direction: column却还用justify-content想调水平位置 - 父容器若高度为
0或未设height/min-height，align-items: center在垂直方向也“没地方可中”
一行代码实现完全居中（水平 + 垂直）
只要主轴是 row（默认），就组合使用两个属性：
container {
display: flex;
justify-content: center;
align-items: center;
}
注意：这个组合在 flex-direction: column 下同样有效，只是角色互换——justify-content 负责垂直，align-items 负责水平。
立即学习“前端免费学习笔记（深入）”；
- 不需要额外 wrapper、
transform或line-height - 不依赖子元素尺寸，响应式友好
- IE10+ 支持，但 IE10–11 对
align-items: center在某些场景下有 bug（比如子元素含min-height）
调试时先确认 flex-direction 的当前值
浏览器开发者工具里容易忽略这个隐式值。直接查 computed 样式里的 flex-direction，别只看 styles 面板里有没有显式声明。
- 用
getComputedStyle(el).flexDirection在控制台快速验证 - 如果用了 CSS-in-JS 或预处理器，检查是否有全局重置或组件级覆盖
- 第三方 UI 库（如 Ant Design）可能对某些组件内部设了
flex-direction: column，导致你的justify-content行为反直觉
justify-content 和 align-items 的作用轴取决于 flex-direction —— 而这个值，可能藏在某处 reset.css 里，也可能被某个 class 暗中改掉。 
