最常见原因是目标元素未设置明确宽度或设为width:100%，且需确保其为块级元素；flex居中失效多因父容器未启用flex或子元素脱离文档流；text-align只影响行内内容；Grid居中需父元素为display:grid且子元素未覆盖居中声明。
为什么 margin: 0 auto 对 div 不起作用
最常见的情况是：目标元素没设 width，或者设了 width: 100%。margin: 0 auto 只对「有明确宽度且为块级元素」生效；如果宽度是 100%，左右 margin 都为 0，自然不居中。
- 确保元素是块级（默认
div是，但若被设为display: inline或inline-block就不行） - 显式设置固定宽度或最大宽度，例如
width: 800px或max-width: 960px - 避免父容器有
text-align: center干扰（它只影响内联内容，对块级margin: auto无效）
Flex 布局中 justify-content: center 没反应
原因通常是父容器没启用 Flex，或子元素被设为 Float/position: absolute 脱离文档流。Flex 居中只作用于 flex 项目（flex items），且仅在主轴方向生效。
- 父容器必须有
display: flex（或inline-flex） - 检查子元素是否被
float、position: absolute/fixed移出 flex 上下文 - 垂直居中需额外加
align-items: center（交叉轴），单靠justify-content不够
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }使用 text-align: center 为何不能居中 div
text-align 只控制**行内内容**（如文字、img、span）在块容器内的水平对齐，对块级子元素本身无影响。很多人误以为它能“居中盒子”，其实只是让内部文字居中了。
- 若想用
text-align辅助居中，子元素得是inline-block并配合vertical-align: middle - 更稳妥的做法是改用 Flex 或 Grid，语义清晰、行为可预测
- 注意：
text-align: center在body或html上设置，不会让所有div居中
Grid 布局中 place-items: center 失效的典型场景
这个属性需要父容器是 display: grid，且子元素未被设为 grid-area 或 place-self 覆盖。另外，如果子元素设置了 width: 100% 或 max-width: 100%，它仍会撑满容器，看起来像没居中。
立即学习“前端免费学习笔记（深入）”；
- 确认父元素有
display: grid，不是display: inline-grid（后者宽高由内容决定） - 避免子元素写
grid-column: 1 / -1这类跨全列的声明，会覆盖居中逻辑 - 调试时可临时加
border: 1px solid red看实际渲染尺寸，常发现子元素宽度意外为 100%
.container { display: grid; place-items: center; min-height: 100vh; }居中失效往往不是某个属性“坏了”，而是布局上下文没对齐——比如用了 Flex 的语法却忘了开 Flex，或把居中逻辑套在脱离文档流的元素上。真正要盯住的，是「当前元素是否还在该布局模型的控制范围内」。