margin: 0 auto 要生效，img 必须是块级元素且有可计算宽度，因此需同时设置 display: block、max-width: 100% 和 height: auto，三者缺一不可。
margin: 0 auto 要生效，img 必须是块级元素且有可计算宽度——但响应式场景下直接设 width 会破坏缩放，所以得靠 display: block + max-width: 100% + height: auto 组合，三者缺一不可。
为什么 margin: 0 auto 单独写在 img 上没反应
浏览器默认把 img 当作行内元素，而 margin: auto 对行内元素完全无效。常见翻车点包括：
- 漏写
display: block，只加了margin: 0 auto - 写了
max-width: 100%却没配height: auto，图片被拉伸或压扁 - 父容器是
display: flex或display: grid，它们会接管子元素的 margin 行为 - 图片加了
float或position: absolute，已脱离文档流
display: block + max-width: 100% 的实际写法
这个组合是兼容性最好、语义最干净的响应式居中方案，适用于 IE11+ 所有现代浏览器。关键不是“加样式”，而是满足三个硬条件：
-
display: block：强制图片脱离行内流，让margin生效 -
max-width: 100%：提供尺寸上限，避免小屏溢出；但它本身不产生“可计算宽度”，所以不能单独依赖它来触发margin: 0 auto -
height: auto：保证等比缩放，否则宽高比失真
正确示例：
<img src="photo.jpg" style="display: block; margin: 0 auto; max-width: 100%; height: auto;">
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
父容器宽度塌缩时，margin: 0 auto 也会失效
即使 img 满足所有块级条件，如果父容器没有有效宽度，margin: 0 auto 依然无空间可分。典型场景包括：
- 父
<div>是空的，也没设width或max-width - 父容器被
float或position: absolute干扰，导致宽度塌缩 - 父容器用了
display: inline-block但没设width，宽度由内容撑开却不稳定
稳妥做法是显式控制父容器宽度：
<div style="width: 100%;"><img src="x.jpg" style="display: block; margin: 0 auto; max-width: 100%; height: auto;"></div>
别用 width: 100% 替代 max-width: 100%
width: 100% 会让图片强行撑满父容器，失去原始尺寸保护，小图会被严重拉伸、模糊。而 max-width: 100% 是“最多不超过父容器宽度”，保留了图片固有尺寸上限。
更关键的是：width: 100% 会让 margin: 0 auto 失效——因为浏览器认为“宽度已占满”，没有剩余空间可分配左右外边距。
响应式图片的核心约束永远是 max-width: 100% + height: auto，居中只是在此基础上叠加的布局行为。
