用 display: flex + justify-content: center + align-items: center 可实现图片响应式居中，但需配合 min-height: 100vh、max-width/max-height 与 width: auto/height: auto 才能避免溢出、拉伸或截断。
直接用 display: flex + justify-content: center + align-items: center 就能搞定，但必须配对控制容器高度和图片缩放行为，否则在小屏或大图下会溢出、拉伸或消失。
为什么 margin: 0 auto 在响应式场景下经常失效
它只管水平居中，且依赖父容器有明确宽度；一旦图片宽高比失衡、父容器未设 max-width 或用了 width: 100%，图片就会撑破布局。更麻烦的是：它完全不处理垂直居中——在移动端视口高度变化频繁时，margin: 0 auto 根本无法保证图片始终在屏幕中央。
- 常见错误现象：
img { display: block; margin: 0 auto; }在 iPhone 竖屏下图片顶部被截断，或横屏时底部留大片空白 - 根本原因：没有约束容器的最小高度，也没有限制图片自身尺寸上限
- 兼容性影响：该写法在 IE11 及以下仍可用，但现代项目已无需为此妥协，
flex兼容性早已覆盖所有主流浏览器（Chrome 29+, Firefox 20+, Safari 6.1+, Edge 12+）
min-height: 100vh 比 height: 100vh 更安全
用 height: 100vh 会让容器严格等于视口高度，一旦内容超出（比如长图+文字），就会触发滚动条，而图片可能被卡在顶部或底部；min-height: 100vh 则确保至少占满一屏，同时允许自然撑高。
- 必须搭配
display: flex容器才有效——否则align-items: center对子元素无作用 - 若页面有固定 header/footer，应改用
min-height: calc(100vh - 80px)（按实际占用高度调整） - 不要在 body 上直接设
display: flex（会破坏段落流），应封装专用容器如<div class="hero-img"> <h3> <code>max-width和width: auto必须成对出现只设
max-width: 90vw不够，浏览器仍可能按原始尺寸渲染；必须加width: auto; height: auto;，让浏览器根据约束自动计算比例尺寸。- 错误示范：
#my-img { width: 100%; height: auto; }→ 在窄屏下强制拉宽，破坏宽高比 - 正确写法：
#my-img { max-width: 90vw; max-height: 80vh; width: auto; height: auto; } - 性能提示：避免对大量图片重复写内联样式，建议抽离为类名统一管理，如
.responsive-img - 容易踩的坑：给图片设
object-fit: contain是多余操作——它适用于background-image或<video></video>，对普通<img>无效
最易被忽略的一点：Flex 容器的
align-items: center只对“单行”子元素生效；如果容器里除了图片还有文字、按钮等其他元素，它们会一起被垂直居中——这时候得考虑是否真需要整个容器居中，还是仅图片需居中，其余内容按文档流排列。 - 错误示范：
