Flex容器必须设display: flex才能启用justify-content和align-items；二者需同时设置才实现完全居中；子元素超容时需检查尺寸限制；flex-direction切换会互换主轴与交叉轴。
flex 容器没设 display: flex 就别谈居中
很多情况根本不是对齐属性写错了，而是父容器压根没启用 Flex 布局。只写 justify-content: center 或 align-items: center 是无效的，浏览器根本不识别这些属性。
必须确保父元素有：
display: flex;
否则所有 flex 对齐设置都等于没写。检查开发者工具里该元素的 computed 样式，看 display 是否为 flex —— 不是的话，先加这行。
justify-content 和 align-items 要一起用才管用
单设一个只能控制一个方向：主轴（默认水平）或交叉轴（默认垂直）。要真正“居中”，两个方向都得明确指定。
立即学习“前端免费学习笔记（深入）”；
-
justify-content: center→ 主轴居中（比如flex-direction: row时是左右居中） -
align-items: center→ 交叉轴居中（同上例，就是上下居中） - 两者缺一不可，漏掉任一个，子元素只会单向居中
常见错误是只写了一个，还纳闷“为什么还是靠左/靠顶”。
子元素尺寸超出容器时 align-items: center 看似失效
如果子元素本身高度超过父容器（比如图片没设 max-height、文字换行撑高），align-items: center 仍会尝试居中，但视觉上可能被截断或溢出，误以为“没居中”。
此时应检查：
- 子元素是否设置了固定
height或未限制内容高度 - 父容器是否有
height或min-height，且足够容纳子元素 - 是否需要改用
align-content: center（仅对多行 flex 容器有效）
更稳妥的做法是给子元素加 max-width: 100% 和 max-height: 100%，再配合 object-fit 或 overflow 控制溢出。
注意 flex-direction 改变后主轴/交叉轴互换
默认 flex-direction: row，主轴水平，交叉轴垂直；一旦改成 column，两者就对调了。
这意味着：
-
justify-content: center在row下是左右居中，在column下变成上下居中 -
align-items: center在row下是上下居中，在column下变成左右居中 - 如果你调换了方向却没同步调整对齐属性，居中就会“跑偏”
最保险的方式是始终按当前 flex-direction 意图来理解这两个属性，而不是死记“justify 是水平、align 是垂直”。
