margin: 0 auto常失效，因它仅水平居中且需图片有可计算宽度；响应式居中须同时解决不溢出、保宽高比、真居中三问题，推荐flex布局（display:flex;justify-content:center;align-items:center）并配min-height和max-width:90vw。
响应式图片居中不是“设个 margin auto 就完事”，而是要同时解决三件事：图片不溢出、宽高比不破坏、在任意视口下都真正居中——缺一不可。
为什么 margin: 0 auto 常常失效
很多人试过给 <img> 加 display: block; margin: 0 auto;，结果在小屏上图片还是撑破容器或偏左。根本原因是：
-
margin: 0 auto只负责水平居中，但前提是图片有“可计算的宽度”；如果只写max-width: 100%而没设width，浏览器无法确定左右空隙，auto就退化成 0 - 父容器若用了
width: 1000px这类固定宽度，小屏下它不会收缩，子元素再怎么max-width: 100%也无济于事 - 图片是行内元素，默认受父容器
text-align影响；一旦你给它加了display: block，又忘了清掉父容器的浮动或 flex 行为，布局就乱了
flex 布局实现真正双向响应式居中
这是目前最可控、最少隐性依赖的方式，但必须写全关键项：
- 父容器设
display: flex、justify-content: center（水平）、align-items: center（垂直）——少一个都不行 - 父容器必须有高度参照，比如
min-height: 50vh或height: 100vh；纯height: auto会让align-items: center失效，图片只会水平居中、垂直贴顶 - 图片自身只需
max-width: 100%+height: auto，不用设固定width，也不用display: block - 如果要限制最大尺寸，用
max-width: 90vw比100%更稳妥，避免紧贴视口边缘
<div style="display: flex; justify-content: center; align-items: center; min-height: 50vh;"> @@##@@ </div>
用 text-align 实现轻量级水平响应式居中
适合图文混排、页眉 logo、卡片内单图等场景，兼容性极好，但只管水平方向：
- 必须作用在父容器上，
<img src="photo.jpg" style="max-width:90%">完全无效 - 父容器建议设
width: 100%或不设宽度，避免被内容撑窄导致居中偏移 - 如果父容器里混了
<div> 等块级子元素，它们不受 <code>text-align控制，会继续左对齐 - 图片保持默认
display: inline即可，加display: block反而让它脱离 text-align 作用范围
<div style="text-align: center; width: 100%;"> @@##@@ </div>
容易被忽略的响应式细节
很多“居中失败”其实卡在这些地方：
-
box-sizing: border-box没加在父容器上，当有padding或border时，max-width: 100%会算错可用宽度 - 图片加载失败时，
alt文字会暴露出来并影响居中效果；加onerror="this.style.display='none'"或统一用占位图更稳 - 旧 Android 浏览器（4.4 及以下）需要
display: -webkit-flex前缀，现代项目可忽略，但若需兼容就得补 - 不要在
上直接设display: flex——它会让所有直系子元素（如多个<p></p>）变成 flex item，破坏原有文档流
