最稳方案是display: flex+justify-content: center+align-items: center，需父容器有可解析高度、图片设max-width: 100%和height: auto；margin: 0 auto因img默认行内且不控垂直而失效。
直接用 display: flex + justify-content: center + align-items: center 是目前最稳的响应式图片居中方案，但必须配对父容器高度和图片缩放约束，否则图片会贴顶、溢出或消失。
为什么 margin: 0 auto 单独写不生效
它只对块级元素起作用，而 <img> 默认是行内元素；即使加了 display: block，也仅解决水平方向，垂直方向完全无控制。更关键的是：一旦父容器没设明确高度（比如靠内容撑开、用了 min-height 却没触发 flex 垂直对齐），margin: 0 auto 就只剩“看起来居中”的假象。
-
<img>必须显式设display: block，否则margin: 0 auto被浏览器忽略 - 图片需有可计算宽度：固有尺寸（如原始 800×600）可用，但
max-width: 100%不行——浏览器无法推算“剩余空间” - 父容器若为
display: flex或display: grid，margin: auto会被直接覆盖，不报错也不生效 - 常见翻车：写了
margin: 0 auto却漏掉display: block，图片纹丝不动
display: flex 居中三要素缺一不可
光写 display: flex 不够，必须同时满足容器行为、主轴/交叉轴控制、高度上下文三个条件。少一个，图片就只水平居中或直接贴顶。
- 父容器设
display: flex，不是<img>自身 - 必须同时写
justify-content: center（水平）和align-items: center（垂直） - 父容器要有可解析的高度：推荐
height: 100vh（全视口高），或min-height: 50vh；用height: 100%很可能无效，因为祖先元素（如）未必有显式高度 -
<img>只需max-width: 100%+height: auto，不用设width或height
响应式尺寸与媒体查询怎么配合才不冲突
媒体查询的目标不是重写图片尺寸，而是切换父容器的对齐方式。图片自身尺寸逻辑应统一管理，避免在每个断点里重复定义 width 或 max-width。
- 基础层统一设
max-width: 90vw（留边距）+height: auto，比100%更安全 - 小屏居中：
@media (max-width: 768px) { .img-container { justify-content: center; } } - 大屏右对齐：
@media (min-width: 1025px) { .img-container { justify-content: flex-end; } } - 别在媒体查询里写
img { width: 100% }——冗余且易覆盖基础约束 - 如果父容器有
padding，记得加box-sizing: border-box，否则实际内容区变窄，图片被挤出
最容易被忽略的其实是父容器的高度来源：不是“有没有 height”，而是这个 height 是否能被浏览器稳定解析。比如 min-height: 100vh 在某些安卓 WebView 下可能失效，此时换成 height: 100vh 反而更可靠；而带文字内容的卡片区域，则更适合用 min-height 避免截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
