真正响应式图片居中需父容器设 display: flex、justify-content: center、align-items: center 和 height: 100vh，img 用 max-width: 100% 和 height: auto，且父容器必须形成 bfc 并有明确高度。
直接给 img 加 margin: 0 auto 或只设 text-align: center，在多数响应式场景下会失效——不是图片不居中，而是它根本没“被当作需要居中的块”来处理。
为什么图片在 flex 容器里缩放后还偏移
常见现象：窗口缩小时图片变小了，但位置往左/上偏了一点；或者用 background-image 铺满时文字叠加位置错乱。根本原因是定位上下文没锁定在图片自身边界内。
- 如果图片父容器没设
position: relative，而你又用position: absolute叠加文字，那文字实际是相对于body或最近的定位祖先定位的 -
justify-content: center只管水平，align-items: center只管垂直，但两者都依赖容器有明确高度（比如height: 100vh），否则 flex 项会按内容高度堆叠，不触发居中逻辑 - 图片设了
width: 100%但没配height: auto，宽高比被破坏，缩放后变形，视觉上“像没居中”
用 flex 实现真正响应式居中的最小必要代码
这不是“推荐写法”，而是只要这四行不漏，就能在 Chrome/Firefox/Safari/Edge 最新版中稳定工作：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"> @@##@@ </div>
-
height: 100vh是关键：没有它，flex 容器高度为 0，align-items: center就没作用对象 -
max-width: 100%比width: 100%更安全——图片原始尺寸小于容器时不会被强行拉大 - 不要给
img加display: block——它在 flex 容器里默认就是 flex item，加了反而可能干扰基线对齐
移动端 Safari 和旧版 Android WebView 的兼容补丁
部分 iOS 15 以下 Safari 会忽略 max-width: 100% 对 img 的约束，导致窄屏下图片溢出。这不是 bug，是它把 img 当作替换元素时的渲染策略差异。
- 加一行
width: 100%强制覆盖：style="max-width: 100%; width: 100%; height: auto;" - 如果图片是语义化内容（如文章配图），务必保留
alt属性，否则某些安卓 WebView 会因缺失alt而跳过缩放逻辑 - 避免用
vw单位直接设img宽度（如width: 90vw），它在横竖屏切换时可能不重绘，flex +max-width组合更稳
最易被忽略的一点：居中效果是否成立，80% 取决于父容器有没有形成 BFC（块级格式化上下文）和明确的高度上下文。别只盯着 img 标签调样式，先确认它的直接父级是不是“知道自己多高、多宽”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
