最稳解法是display: flex+justify-content: center+align-items: center，但须父容器有可计算高度、图片设max-width: 100%和height: auto，缺一不可；margin: 0 auto仅水平生效且依赖块级与固定宽高，缩放时易失效。
直接用 display: flex + justify-content: center + align-items: center 是最稳的解法，但必须配对控制父容器高度和图片缩放行为，否则小屏溢出、大屏错位、垂直不居中全都会出现。
为什么 margin: 0 auto 在窗口缩放时大概率失效
它只管水平方向，且依赖两个前提：图片是块级（display: block），父容器有明确宽度。但窗口缩放时，父容器宽度常是动态的，margin: auto 垂直方向根本无从计算；更常见的是，图片加了 width: 100% 或固定像素值，一到小屏就撑破布局，浏览器直接放弃居中逻辑。
-
img默认是行内元素，margin: 0 auto对它完全无效 - 即使加了
display: block，也仅水平居中，垂直方向仍贴顶 - 父容器若用
min-height而非height，align-items: center可能不触发 - 图片写了
width: 300px这类固定值 → 小屏必然溢出，居中失效
flex 居中必须同时满足的三个条件
缺一不可，漏掉任意一个，图片就会偏左、偏上、或整个“消失”在视口外。
- 父容器设
display: flex—— 不是给img加，是给它的直接父<div>加 - 父容器必须有可计算的高度参照：比如
height: 100vh、min-height: 400px，或确保html和body有height: 100% - 必须同时写
justify-content: center（主轴）和align-items: center（交叉轴）—— 只写前者，只剩水平居中
图片自身只需：max-width: 100%（防溢出）、height: auto（保比例），display: block 可省略（flex 下自动变成块级参与对齐）。
立即学习“前端免费学习笔记（深入）”；
移动端和 Safari 的兼容性细节
iOS 旧版 Safari（flex 的 align-items: center 在 min-height 容器里支持不稳定，容易导致垂直偏移；另外，图片加载慢时可能出现“闪动”（先顶部显示，再跳到中间）。
- 加
min-height: 100vh比单纯height: 100vh更稳妥，避免内容少时塌陷 - 为防闪动，可在父容器加
overflow: hidden，或给图片加vertical-align: top（仅当使用text-align方案时有效） - 如果必须兼容 iOS 12–13，加
-webkit-box-align: center和-webkit-box-pack: center，并用display: -webkit-box - 别用
aspect-ratio控制容器高宽比来替代高度设置——它不触发align-items的垂直居中逻辑
真正麻烦的不是代码写几行，而是高度参照是否稳定、父容器是否脱离文档流、以及图片有没有偷偷带固定尺寸。这些点一旦漏查，调试时会反复回到同一个错觉：“明明写了 center，怎么就是不中？”
