Flex子元素不居中需先确认主轴方向：justify-content控制主轴对齐，align-items控制交叉轴对齐，二者须与flex-direction匹配；默认row时主轴水平，column时主轴垂直。
flex 子元素不居中，先看 justify-content 对应的主轴方向
Flex 布局中“居中”不是单指视觉居中，而是分主轴（main axis）和交叉轴（cross axis）。justify-content 控制的是主轴上的对齐，它是否生效，完全取决于 flex-direction 的值。如果设了 justify-content: center 但子元素横着堆在左边，大概率是主轴仍是默认的 row，而你误以为它该在垂直方向起作用。
-
flex-direction: row（默认）→ 主轴水平 →justify-content水平生效，align-items垂直生效 -
flex-direction: column→ 主轴垂直 →justify-content垂直生效，align-items水平生效 - 没显式写
flex-direction，就按默认row理解，别凭感觉猜
为什么加了 justify-content: center 还是靠左？
常见原因是父容器没有撑开宽度，或者子元素是 inline 类型（比如未设 display: block 的 <span></span>），导致 flex 无法按预期计算主轴空间。另外，若父容器被设了 width: fit-content 或含 float、position: absolute 等脱离文档流的属性，也会让主轴可用空间异常缩小。
- 检查父容器是否有
width、max-width或display: inline-flex导致宽度不足 - 确认子元素没有
margin-left: auto或float: left这类强行偏移的样式 - 用浏览器开发者工具选中父容器，看 computed 栏里的
flex-direction和justify-content是否如你所设
真正想垂直+水平居中？两个属性缺一不可
仅靠 justify-content: center 只能控制主轴；要同时居中，必须配对使用 align-items: center，且二者作用轴线要匹配当前 flex-direction。如果用了 flex-direction: column，那 justify-content 是管上下，align-items 才管左右——顺序反了就会错位。
.container {
display: flex;
flex-direction: row; /* 主轴水平 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}如果改用 column：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-direction: column; /* 主轴垂直 */
justify-content: center; /* 垂直居中 */
align-items: center; /* 水平居中 */
}遇到 align-items: stretch 导致高度异常拉伸
这是 flex 默认值，会让子元素在交叉轴上“撑满”容器高度。如果你只想要居中，又没给子元素设 height 或 min-height，它可能看起来像错位——实际是被拉高后内容贴顶了。此时加 align-items: center 能解决，但更稳妥的是显式覆盖默认行为。
- 不要依赖默认
align-items，尤其当子元素高度不一致时 - 若子元素是图片或内联块级元素，注意它们自带
vertical-align: baseline，会干扰 flex 对齐，可加vertical-align: top或统一设为display: block - 移动端 Safari 对
align-items: center在某些嵌套 flex 中兼容性略弱，可补min-height: 1px防止塌陷
主轴方向不是玄学，是 flex-direction 和 justify-content 协同生效的前提。错位往往不是代码写错了，而是没意识到当前主轴到底是横还是竖。
