justify-content只对flex容器生效，必须在父元素设置display:flex；子元素不能直接设该属性；需配合align-items实现垂直居中，且父容器需有明确高度；IE兼容可降级为text-align:center+inline-block。
flex 容器的
不生效？先确认父元素是 flex 布局
直接给子元素加
没用，因为这个属性只对
flex 容器
有效。必须确保父元素已声明
，否则
完全被忽略。
错误写法：
（
不是子元素的属性）
正确写法：
如果父元素还设置了
或
，但没撑满容器，居中效果可能“看起来偏左”——本质是父容器自身没占满，需检查其宽度来源
子元素是 inline 元素（如
）时，
仍有效，但要注意换行
flex 布局下，所有子元素默认变成
，无论原来是块级还是内联。所以
、
等也能被
居中控制。
常见陷阱：多个
写在同一行且中间有空格，会被当作文本节点参与布局，导致额外间隙；建议删掉 HTML 中的换行/空格，或设
在父元素上（再单独给子元素设字体大小）
若希望子元素保持单行不换行，加
（默认值，一般不用显式写）
若子元素内容过长溢出容器，
仍居中整体，但内容会被截断——这时要考虑
或
控制
水平居中但垂直方向不对齐？补上
只管主轴（默认是水平），交叉轴（默认是垂直）需要单独控制。如果发现元素虽然水平居中了，但上下贴顶或参差不齐，大概率缺了垂直对齐设置。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
常用组合：
要求父容器有明确高度（比如
或
），否则可能“看不出效果”，因为容器高度由内容撑开
如果子元素是多行文本或弹性高度，考虑用
（仅当存在多根主轴时生效，即
且内容换行）
旧项目兼容性要求高，
不被支持怎么办
IE10–IE11 对 flex 的实现有偏差，比如不支持
在某些场景下的表现（尤其是嵌套 flex 或与
混用时）。
立即学习
“
前端免费学习笔记（深入）
”；
最稳的降级方案：
（适用于单个或多个内联级子元素）
块级元素居中可配合
，但前提是子元素有明确宽度：
避免在 IE 中混用
和
，会导致布局完全错乱
真正卡住的时候，往往不是
写错了，而是忘了它只作用于 flex 容器本身，或者父容器的高度、宽度、内外边距干扰了视觉判断。多看一眼 computed styles 里的
和
，比反复调
更快定位问题。
justify-contentjustify-content: centerdisplay: flexjustify-content.child { justify-content: center; }justify-content.parent { display: flex; justify-content: center; }widthmax-widthspanjustify-contentflex-itemspanajustify-contentspanfont-size: 0flex-wrap: nowrapjustify-contentoverflowwhite-spacealign-itemsjustify-content.parent { display: flex; justify-content: center; align-items: center; }align-items: centerheight: 100pxmin-height: 100vhalign-content: centerflex-wrap: wrapjustify-contentjustify-content: centermargin: auto.parent { text-align: center; } .child { display: inline-block; }margin: 0 auto.child { width: 200px; margin: 0 auto; }display: flexfloatjustify-contentdisplaywidthjustify-content