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：保证等比缩放，否则宽高比失真

正确示例：

@@##@@

父容器宽度塌缩时，margin: 0 auto 也会失效

即使 img 满足所有块级条件，如果父容器没有有效宽度，margin: 0 auto 依然无空间可分。典型场景包括：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 父 <div> 是空的，也没设 <code>width 或 max-width
• 父容器被 float 或 position: absolute 干扰，导致宽度塌缩
• 父容器用了 display: inline-block 但没设 width，宽度由内容撑开却不稳定

稳妥做法是显式控制父容器宽度：


<div style="width: 100%;">@@##@@</div>

别用 width: 100% 替代 max-width: 100%

width: 100% 会让图片强行撑满父容器，失去原始尺寸保护，小图会被严重拉伸、模糊。而 max-width: 100% 是“最多不超过父容器宽度”，保留了图片固有尺寸上限。

更关键的是：width: 100% 会让 margin: 0 auto 失效——因为浏览器认为“宽度已占满”，没有剩余空间可分配左右外边距。

响应式图片的核心约束永远是 max-width: 100% + height: auto，居中只是在此基础上叠加的布局行为。