居中失效主因是上下文错配：text-align: center仅作用于块级父容器内的行内子元素，若父容器为flex/grid/absolute或img被设为block且未配margin: 0 auto，或父容器宽度塌缩，则均会失效。
居中失效不是 CSS 写错了，而是上下文没搭对——90% 的问题出在 display 行为、父容器状态或元素脱离文档流上。
text-align: center 为什么对 div 或 img 没反应
这个属性只作用于块级父容器内的行内级子元素，text-align: center 写在 <div> 上，对它自己的子 <code><div>（块级）完全无效；但对子 <code><img alt="HTML元素居中对齐没效果怎么办？排查修复指南" > 或 <p></p> 内的文字有效。
- 检查父容器是否被设为
display: flex、display: grid、float或position: absolute—— 这些会让text-align静默失效 -
<img alt="HTML元素居中对齐没效果怎么办？排查修复指南" >默认是 inline，所以text-align: center在父<div> 上能生效；但若给 <code><img alt="HTML元素居中对齐没效果怎么办？排查修复指南" >加了display: block，又没配margin: 0 auto，就会看起来“失效” - 父容器宽度塌缩（比如空
<div> 或仅含浮动子项），computed width 是 <code>0px，text-align就失去作用基准margin: 0 auto 居中不生效的硬性条件
这个组合不是“写了就居中”，它需要三个条件同时满足：元素是块级、有明确宽度、父容器是常规文档流（非 flex/grid/absolute）。
- 必须显式设置
display: block（<img alt="HTML元素居中对齐没效果怎么办？排查修复指南" >、<a></a>、<span></span>默认都不是） - 元素得有可计算宽度：
width: 300px可行，max-width: 100%不行，width: auto在无内容时也常算不出值 - 父容器不能是
display: flex或display: grid—— 它们会接管 margin 行为，直接忽略auto - 别给父容器加
float或position: absolute，否则父容器可能塌陷，导致“没空间可分”
Flex 布局 justify-content: center 看似写了却不居中
这不是漏写，而是父容器没通过“flex 启动三要素”校验：必须同时具备
display: flex、justify-content: center、以及一个**可计算的主轴尺寸**（通常是宽度）。立即学习“前端免费学习笔记（深入）”；
- 如果父容器是
width: 100%但外层没有高度约束（比如body没设min-height），某些旧版 WebView 会按0px渲染，导致对齐不可见 -
align-items: center要求父容器有明确高度参照（height或min-height），否则垂直方向“无空间可居中” -
<img alt="HTML元素居中对齐没效果怎么办？排查修复指南" >自身若加了float: left或position: absolute，它已脱离 flex 流，整个对齐逻辑自动跳过 - 别在
上直接设display: flex，会把所有直系子元素（如多个<p></p>）都变成 flex item，布局全乱
Grid 的 place-items: center 为什么像没起作用
这个属性只控制子元素在网格单元内的整体位置，不影响子元素内部的内容排版。它对
<p></p>居中，但不会让<p></p>里的换行文字也居中。- 确认父容器是
display: grid（不是inline-grid），且子元素没被place-self或grid-area覆盖 - 子元素若设了
width: 100%或max-width: 100%，它会撑满容器，视觉上像没居中 -
place-items: center不替代text-align: center—— 前者管盒子定位，后者管文字对齐，二者必须配合使用 - 响应式下，
max-width: 60ch+margin: 0.5rem auto 1rem比单纯place-items更稳，尤其对多行段落
真正卡住人的地方，往往不是不知道某个属性，而是没意识到：浏览器渲染居中效果的前提，是先能准确测量容器和元素的尺寸与流式上下文。一旦 display、position 或 float 打乱了这个前提，再写十遍
center也没用。 - 必须显式设置
