justify-content只对flex容器生效，必须在父元素设置display:flex；子元素不能直接设该属性；需配合align-items实现垂直居中，且父容器需有明确高度；IE兼容可降级为text-align:center+inline-block。
flex 容器的 justify-content 不生效？先确认父元素是 flex 布局
直接给子元素加 justify-content: center 没用，因为这个属性只对 flex 容器 有效。必须确保父元素已声明 display: flex，否则 justify-content 完全被忽略。
- 错误写法：
.child { justify-content: center; }（justify-content不是子元素的属性） - 正确写法：
.parent { display: flex; justify-content: center; } - 如果父元素还设置了
width或max-width，但没撑满容器，居中效果可能“看起来偏左”——本质是父容器自身没占满，需检查其宽度来源
子元素是 inline 元素（如 span）时，justify-content 仍有效，但要注意换行
flex 布局下，所有子元素默认变成 flex-item，无论原来是块级还是内联。所以 span、a 等也能被 justify-content 居中控制。
- 常见陷阱：多个
span写在同一行且中间有空格，会被当作文本节点参与布局，导致额外间隙；建议删掉 HTML 中的换行/空格，或设font-size: 0在父元素上（再单独给子元素设字体大小） - 若希望子元素保持单行不换行，加
flex-wrap: nowrap（默认值，一般不用显式写） - 若子元素内容过长溢出容器，
justify-content仍居中整体，但内容会被截断——这时要考虑overflow或white-space控制
水平居中但垂直方向不对齐？补上 align-items
justify-content 只管主轴（默认是水平），交叉轴（默认是垂直）需要单独控制。如果发现元素虽然水平居中了，但上下贴顶或参差不齐，大概率缺了垂直对齐设置。
- 常用组合：
.parent { display: flex; justify-content: center; align-items: center; } -
align-items: center要求父容器有明确高度（比如height: 100px或min-height: 100vh），否则可能“看不出效果”，因为容器高度由内容撑开 - 如果子元素是多行文本或弹性高度，考虑用
align-content: center（仅当存在多根主轴时生效，即flex-wrap: wrap且内容换行）
旧项目兼容性要求高，justify-content 不被支持怎么办
IE10–IE11 对 flex 的实现有偏差，比如不支持 justify-content: center 在某些场景下的表现（尤其是嵌套 flex 或与 margin: auto 混用时）。
立即学习“前端免费学习笔记（深入）”；
- 最稳的降级方案：
.parent { text-align: center; } .child { display: inline-block; }（适用于单个或多个内联级子元素） - 块级元素居中可配合
margin: 0 auto，但前提是子元素有明确宽度：.child { width: 200px; margin: 0 auto; } - 避免在 IE 中混用
display: flex和float，会导致布局完全错乱
justify-content 写错了，而是忘了它只作用于 flex 容器本身，或者父容器的高度、宽度、内外边距干扰了视觉判断。多看一眼 computed styles 里的 display 和 width，比反复调 justify-content 更快定位问题。 
