margin: 0 auto不生效，因<img>默认为inline元素，须设display: block且有明确宽度；父容器不能是flex/grid/float/absolute；text-align: center须作用于父容器而非图片本身。
为什么直接写 margin: 0 auto 不生效
因为 <img> 默认是 inline 元素，而 margin: 0 auto 只对块级元素（且有明确宽度）起作用。你没改 display，浏览器就当它还是文字里的一个字符，自动忽略左右 margin。
必须同时满足三个条件：图片设 display: block，父容器宽度足够（比如 width: 100%），图片自身不能是 width: 100% 或 max-width: 100%——否则“auto”失去计算依据，左右 margin 会退化为 0。
- 常见错误：给
<img>直接加style="margin: 0 auto"，没写display: block - 更隐蔽的坑：父容器用了
float、position: absolute或display: flex，这些都会让margin: auto失效 - 兼容性友好但局限：这个方法只管水平居中，垂直方向得靠父容器的
padding、line-height或外层再套 flex 容器
text-align: center 必须写在父容器上
很多人把 text-align: center 写在 <img> 标签里，这完全无效——它不是控制自身，而是控制“子内容”的对齐方式。只有父容器设了，且里面是 inline 或 inline-block 元素，才起作用。
这个方案天然适配响应式：图片保持默认 inline，父容器加 text-align: center，再配合 img { max-width: 100%; height: auto; }，就能随容器缩放始终水平居中。
立即学习“前端免费学习笔记（深入）”；
- 别在父容器设
font-size: 0（常用来清除 inline 间隙），会导致图片高度塌缩甚至消失 - 如果父容器里混有
<div>这类块级子元素，它们不受text-align影响，依然左对齐，可能造成视觉错位 - 小屏/大屏切换时，只需用媒体查询改父容器的
text-align值，不用重复定义图片尺寸
Flex 布局要避免高度塌陷
justify-content: center 管水平，align-items: center 管垂直——但后者依赖父容器在交叉轴（通常是高度）上有可测量值。如果父容器没设高度，align-items: center 就等于“在 0px 高的空间里居中”，结果就是图片贴顶。
视口级居中推荐 height: 100vh；内容区居中建议用 min-height: 200px 或类似值。图片本身只需 max-width: 100% 和 height: auto，不用设固定宽高。
- 别直接在
<body>上写display: flex，否则所有直系子元素（如多个<p>）都会变成 flex item，原有文档流全乱 - 旧 Android（4.4 及以下）需补
display: -webkit-flex和对应前缀 - 如果父容器已有其他布局逻辑（比如 CMS 主题自带的 grid/flex），强行加 flex 可能触发样式冲突，优先查 computed styles 确认实际渲染行为
响应式对齐切换别重写图片尺寸
媒体查询的目标不是反复设置 img { width: 100% }，而是控制对齐行为本身。图片尺寸靠一次性的 max-width 和 height: auto 就能搞定；对齐则由父容器的 text-align 或 flex 属性控制。
例如：小屏居中、中屏左对齐、大屏右对齐，只需改父容器 class 的 media query 规则，不碰图片样式。
- 错误做法：每个断点都写一遍
img { width: 80%; margin: 0 auto; }，维护成本高且易出错 - 正确思路：用语义化容器名（如
.hero-img、.feature-img），让对齐策略和内容结构解耦 - 容易被忽略的一点：如果父容器写了
width: 1000px这类固定宽度，小屏下无法收缩，图片被迫溢出，看起来像“居中失败”，其实是容器没响应
