justify-content: center单独使用只能实现主轴方向居中，必须配合display: flex且受flex-direction影响：默认row时水平居中，column时垂直居中；要完全居中还需align-items: center，并确保父容器有可计算高度和子元素未脱离文档流。
justify-content: center 不能单独让元素居中
只写 justify-content: center 最多实现主轴方向居中，不是“元素居中”本身——它必须配合 display: flex 容器，且效果完全取决于 flex-direction 设定的主轴方向。
常见误操作是给一个普通 <div> 直接加 <code>justify-content: center，结果毫无反应，因为该属性对非 Flex 容器无效。
- 必须先在父容器上声明
display: flex - 默认
flex-direction: row→ 主轴水平 →justify-content: center= 水平居中 - 若设了
flex-direction: column→ 主轴垂直 →justify-content: center= 垂直居中 - 单靠它无法同时控制两个方向；要完全居中，还得加
align-items: center
为什么写了 justify-content: center 还不居中？
最常被忽略的是父容器没有可计算的高度，尤其在垂直居中场景下。但即使只是水平居中，也可能因以下原因失效：
- 父容器宽度为
0或未撑开（比如内部全是浮动/绝对定位子元素） - 子元素设置了
width: 100%或flex: 1，强行占满导致“居中不可见” - 父容器用了
inline-flex但未设置width，实际渲染宽度由内容决定，center效果被压缩 - 浏览器计算时遇到
min-width: max-content等限制，挤压了可用空间
justify-content 和 align-items 到底谁管哪边？
它们不固定对应“水平”或“垂直”，而是严格按主轴/交叉轴划分——而主轴由 flex-direction 决定：
- 默认
flex-direction: row：主轴水平 →justify-content控制左右，align-items控制上下 - 设为
flex-direction: column：主轴变垂直 →justify-content控制上下，align-items控制左右 -
flex-direction: row-reverse或column-reverse会翻转起始端，flex-start对应的位置就变了 - 别用
align-content: center替代align-items——它只对多行换行（flex-wrap: wrap且真换行）生效
移动端和老浏览器里 justify-content 的坑
justify-content: space-evenly 在 IE11 完全不支持，place-items: center 虽简洁但 Safari 14.1 以下也不认。更隐蔽的问题出在视口高度上：
-
height: 100vh在 iOS Safari 中，地址栏收起/展开会导致视口高度跳变，align-items: center看起来“抖动” - 稳妥做法是改用
min-height: -webkit-fill-available+min-height: 100vh双写 - 如果父容器是
，记得重置html, body { height: 100%; margin: 0; }，否则100vh无效 - 子元素是纯文本时，可能因基线对齐（baseline）产生视觉偏移，包一层
<div> 或加 <code>display: inline-block更稳 真正卡住人的，往往不是属性写错，而是打开开发者工具后，第一眼没看父容器的 computedheight和width—— 那些数值比任何 CSS 规则都诚实。
