Flex布局中内容不居中，主要因混淆主轴与交叉轴对齐属性、父容器缺高度或子项align-self覆盖；需同时设justify-content和align-items为center，并确保父容器有明确高度，单个子项可用margin:auto居中。
Flex 布局中中间内容不居中，通常是因为混淆了主轴（main axis）和交叉轴（cross axis）的对齐属性，或未正确设置容器的 display: flex 及相关对齐方式。
确认主轴方向再选对齐属性
Flex 主轴默认是水平方向（flex-direction: row），此时：
-
主轴对齐用
justify-content（控制元素在水平方向的位置） -
交叉轴对齐用
align-items（控制元素在垂直方向的位置）
若改成 flex-direction: column，主轴变垂直，两者作用就互换。想让内容真正“居中”，往往需要同时设置两个属性：
display: flex;
justify-content: center; /* 主轴居中 */
align-items: center; /* 交叉轴居中 */
检查父容器是否设了高度
当使用 align-items: center 垂直居中时，如果父容器没有明确高度（比如仅靠内容撑开），浏览器可能无法计算交叉轴的中心位置，导致视觉上不居中。
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
height: 100vh或固定高度（如min-height: 100vh） - 或用
height: 100%配合父级有高度约束（确保高度可传递）
注意子项是否设置了自身对齐覆盖
子元素可通过 align-self 覆盖父容器的 align-items，导致个别项偏移。
- 检查子元素是否误写了
align-self: flex-start等值 - 必要时在子项上重置：
align-self: auto或直接删掉该声明
单个元素居中？试试 margin: auto
在 Flex 容器中，对**单个子元素**设置 margin: auto 会自动将其在主轴和交叉轴都推到中心（无需写 justify/align）：
- 适用场景：只有一个核心内容块，比如登录框、弹窗主体
- 简洁可靠，且不依赖主轴方向
- 注意：多个子项时，
margin: auto行为会变化，慎用
不复杂但容易忽略。关键就是分清哪是主轴、哪是交叉轴，再配合适当的高度约束和属性组合。
