justify-content: center 是 flex 布局中实现主轴水平居中的最直接方式，适用于多个子元素整体居中；单个元素推荐用 margin: auto，更可靠且不受兄弟元素影响。
flex布局中用justify-content实现水平居中
父容器设为 display: flex 后，justify-content: center 是最直接的水平居中方式，它作用于主轴（默认是水平方向），把所有子元素沿主轴居中对齐。
注意：这个方法只对 flex 项目生效，且要求子元素没有设置 margin: auto 或固定宽度撑满导致挤压。
- 父容器必须声明
display: flex或display: inline-flex - 如果子元素是单个块级元素，
justify-content: center足够；多个元素会整体居中，彼此间距不变 - 若主轴被显式改为列方向（
flex-direction: column），justify-content就控制垂直方向了
单个元素用margin: auto更可靠
当父容器是 flex 容器时，给子元素设置 margin: auto，浏览器会自动计算左右外边距，强制该元素在主轴上居中——这个方式不依赖 justify-content 值，也不受兄弟元素影响，适合单个元素居中场景。
常见误操作是只写 margin: 0 auto，这在非 flex 容器中有效，但在 flex 容器里必须是 margin: auto 才能触发居中逻辑。
立即学习“前端免费学习笔记（深入）”；
-
margin: auto在 flex 容器中同时作用于主轴和交叉轴，如需仅水平居中，可用margin: 0 auto（但前提是父容器主轴为水平） - 该方法兼容性好，chrome 21+/firefox 20+/safari 6.1+ 均支持
- 如果子元素设置了
flex: 1或width: 100%，margin: auto可能失效，需检查是否被拉伸占满
避免常见错误：flex-direction 和 width 干扰
水平居中失败，大概率是因为主轴方向被改成了垂直，或者子元素宽度撑开了父容器。
- 检查父容器是否误加了
flex-direction: column—— 此时justify-content: center控制的是垂直居中 - 子元素若设了
width: 100%或flex: 1，它会占据全部可用空间，自然无法“居中”，此时应限制其固有宽度（如width: 200px）或用max-width - 父容器未设置明确宽度（比如
width: 100%或width: fit-content），可能导致行为不可预期，尤其在内联上下文中
兼容老版本 Safari 的写法（ios 8/9）
iOS 8–9 的 Safari 对 justify-content: center 支持不稳定，特别是配合 flex-wrap: wrap 时容易偏移。稳妥做法是加一行旧版前缀：
display: -webkit-flex; justify-content: center;不过现在 iOS 10+ 已基本无此问题，除非项目仍需支持 iOS 9 及以下系统。
真正容易被忽略的是：flex 居中本质依赖“可用空间”的计算，而这个空间受父容器的 box-sizing、padding、border 影响——如果父容器有大 padding，又没设 box-sizing: border-box，实际内容宽度变小，居中基准就偏了。