fixed + flex 是 modal 图片居中的唯一可靠组合，因 fixed 锚定视口防滚动偏移，flex 不依赖图片尺寸即可精准居中；必须设置 top:0;left:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;z-index:9999;background:rgba(0,0,0,0.8)，缺一不可。
为什么 fixed + flex 是 modal 图片居中的唯一可靠组合
因为 position: fixed 把遮罩和图片容器锚定在视口，滚动时不会偏移；而 display: flex 能在图片尺寸未知、缩放变化、高 DPR 屏幕下仍精准居中子元素。只用 top: 50%; left: 50%; transform: translate(-50%, -50%) 在 iOS Safari 缩放后常有 1px 偏移，margin: auto 则要求图片有固定宽高，实际场景中几乎不可行。
modal 容器必须写的 CSS 属性一个都不能少
漏掉任意一项都会导致遮罩不全屏、图片错位或居中失效：
-
top: 0; left: 0; width: 100vw; height: 100vh——100%在某些安卓 WebView 和旧版 Safari 中会漏边，100vw/vh才真正覆盖视口边界 -
display: flex; justify-content: center; align-items: center—— 缺一不可，仅justify-content只水平居中，仅align-items只垂直居中 -
z-index: 9999—— 查过当前页面最高z-index（如 Ant Design 是 1000），取明显更大值，否则被第三方弹窗盖住 -
background: rgba(0, 0, 0, 0.8)—— 别用opacity控制整体透明度，否则放大图也会变淡
放大图本身容易被忽略的三个细节
图片不是塞进去就完事，尺寸、比例、加载状态都得单独处理：
- 图片标签必须设
max-width: 90vw; max-height: 90vh;，并加object-fit: contain，否则宽高比失真或撑爆视口 - 图片
width和height应设为auto，靠max-限制上限，保留原始比例 - 动态插入图片时，必须每次更新
<img>的src，不能复用同一个 DOM 节点——否则第二张图点击后显示的还是第一张的地址
移动端双指缩放失效？检查这两处
iOS Safari 默认禁用 modal 内图片的双指缩放，修复只需两步：
立即学习“前端免费学习笔记（深入）”；
-
<meta name="viewport">中不能含user-scalable=no，否则整个页面禁止缩放 - 放大图的父容器（即 modal 内的
<div>或<img>）必须加style="touch-action: manipulation;"，这是开启双指缩放的开关
这两处任缺其一，用户点开大图后就只能干瞪眼——既不能缩放，也拖不动，问题隐蔽但高频。
