最可靠方案是display: flex+justify-content: center+align-items: center，但须满足父容器启用flex、有明确高度、图片未脱离文档流三个硬条件，缺一不可。
Flex 居中响应式图片，关键不在 img 本身，而在容器是否满足三个硬条件：启用 display: flex、有明确高度（或最小高度）、图片未脱离文档流。缺一就会“写了没反应”。
父容器必须设 display: flex 且有高度
只给 img 加 justify-content: center 没用——这个属性只对 flex 容器生效。常见失效原因：
- 父容器没写
display: flex，只写了子元素样式 - 父容器只有
width没设height或min-height，导致交叉轴（垂直方向）长度为 0，“居中”无参考基准 - 用了
height: 100vh但内容撑高后出现滚动条遮挡，更稳妥的是min-height: 100vh
推荐写法：.img-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
img 自身必须保持比例且不脱离流
响应式居中不是把图片拉满容器，而是让它按原始宽高比缩放并居中。错误做法包括：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 同时设
width: 100%和height: 100%：强制拉伸，破坏比例 - 加
float: left或position: absolute：元素脱离文档流，flex 对齐规则失效 - 忘记设
max-width: 100%：宽屏下图片溢出容器
正确组合：max-width: 90vw; max-height: 80vh; width: auto; height: auto; ——上限控制 + 比例自适应
响应式对齐要靠媒体查询切换容器行为，不是改图片
想实现“小屏居中、大屏右对齐”，不能每个断点都重写 img 的 margin，而应控制父容器的 flex 行为：
- 小屏：
@media (max-width: 768px) { .img-container { justify-content: center; } } - 大屏：
@media (min-width: 1025px) { .img-container { justify-content: flex-end; } } - 避免在媒体查询里重复定义
img尺寸，那会干扰比例逻辑
如果用 text-align 兼容旧浏览器，同样只改父容器的 text-align，别碰 img 的 display 或 margin
最容易被忽略的是容器高度塌陷和图片脱离流——这两点导致 80% 的“flex 居中失败”案例。检查时先看 computed styles 里父容器的 height 是否有效，再确认 img 的 position 和 float 是默认值。
