最稳方案是display: flex+justify-content: center+align-items: center，但必须满足父容器有明确高度、图片尺寸受max-width: 100%和height: auto约束、且未脱离文档流三个硬条件，缺一则失效。
直接用 display: flex + justify-content: center + align-items: center 是目前最稳、最可控的方式，但必须配对父容器高度和图片尺寸约束——漏掉任意一个，图片就“看起来没动”。
为什么 margin: 0 auto 在响应式里大概率失效
它只对块级元素生效，而 <img> 默认是 inline；即使加了 display: block，也还需满足两个硬条件：
-
max-width: 100%会让浏览器无法计算“剩余空间”，margin: 0 auto实际变成无效 - 父容器若用了
display: flex或display: grid，会接管子项 margin 行为，该写法直接被忽略 - 它完全不控制垂直方向，小屏下图片常贴顶或底部留大片空白
text-align: center 什么时候能用、什么时候会翻车
它对默认 inline 的 <img> 天然有效，但极易被干扰：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 写在
<img>标签上完全无效——必须作用于父<div>或<p> - 父容器若用了
float、position: absolute或display: inline-block，宽度可能塌缩，text-align就“失焦” - 混排了
<div>这类块级子元素时，它们不受影响，视觉上图片会被挤偏 - 它只管水平，垂直方向仍需额外处理（比如靠
line-height或外层 flex）
Flex 居中必须同时满足的三个条件
只写 display: flex 和 justify-content: center 是常见半成品，真正生效要三者齐备：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有可计算的高度：比如
min-height: 300px、height: 100vh，或确保所有祖先都设了height: 100%（常漏掉html和body） -
justify-content: center控制水平，align-items: center控制垂直——漏掉后者，图片就只水平居中、垂直贴顶 -
<img>自身只需max-width: 100%+height: auto；不用设width或height，更别加display: block（flex 下不必要）
最容易被忽略的是父容器高度是否真正“可计算”——很多页面里 min-height 没触发、或者容器被 float 或 position: absolute 带偏，结果就是代码全对，图片纹丝不动。
