margin: 0 auto 在响应式图片居中场景下水平“勉强可用”但极易失效，且完全不处理垂直居中；它要求 display: block、固定宽度及非 flex/grid 父容器三者同时满足，而响应式中宽度常动态变化，故天然不匹配。
margin: 0 auto 在响应式图片居中场景下，只对水平方向“勉强可用”，但极易失效，且完全不处理垂直方向——它不是响应式居中的合理选择。
为什么 margin: 0 auto 经常不生效
这不是浏览器 bug，而是 CSS 行为逻辑决定的。它要求三个硬条件同时满足，缺一不可：
-
display: block或inline-block（img默认是inline，不加这个就完全忽略margin） - 图片必须有可计算的宽度：比如
width: 300px；max-width: 100%不行，因为浏览器无法推导“剩余空间” - 父容器不能是
display: flex或display: grid—— 这两类布局会接管子元素的 margin 分配逻辑
响应式场景下，图片宽高常随视口变化，width 很难固定，所以 margin: 0 auto 天然不匹配需求。常见翻车：写了 margin: 0 auto 却没反应 → 八成漏了 display: block，或父容器用了 flex。
text-align: center 是更靠谱的水平居中写法
它不操作图片本身，而是让父容器以“文本流”方式排版，天然适配响应式缩放：
立即学习“前端免费学习笔记（深入）”；
- 必须写在父容器上，例如：
<div style="text-align: center"><img src="a.jpg"></div> -
img保持默认inline状态，无需改display - 配合
max-width: 100%和height: auto，窄屏不溢出、宽屏不拉伸 - 兼容性极好，IE8+ 都支持
注意：如果父容器设了 font-size: 0（常用于清除 inline 间隙），得单独给 img 加 font-size: initial，否则图片可能消失。
外边距用 rem/vw 才算真正响应式
直接写 margin: 20px 是固定像素，在小屏上会撑破布局。响应式外边距应基于视口或根字体：
- 用
rem：如margin: 1.5rem 0;，随html的font-size缩放，适合图文流节奏统一 - 用
vw：如margin-left: 4vw;，随视口宽度线性变化，适合全宽图微调定位 - 避免
margin: 0 auto混用单位——它只认“剩余空间”，不是响应式单位的适用场景
若真要加外边距又想居中，推荐组合：display: block; margin: 1.2rem auto; max-width: 90vw;，但记住：这仍是水平居中，垂直方向仍需额外控制。
真正响应式双向居中别碰 margin
垂直居中根本不在 margin 职责范围内。哪怕你把 margin-top 设成 50vh，在不同设备上也会错位。可靠方案只有两个：
-
display: flex：父容器加display: flex; justify-content: center; align-items: center; min-height: 100vh;，图片加max-width: 90vw; height: auto; -
position + transform：父容器position: relative;，图片position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
最容易被忽略的是：flex 方案里 min-height（或 height）是刚需，没有高度约束，align-items: center 就等于没写。
