窄屏下大图居中失效的本质是视口宽度与图片固有尺寸冲突，需用 position: absolute + transform: translate(-50%, -50%) 配合父容器 relative、max-width/max-height 100vw/vh 和 object-fit: contain 实现可靠居中。
窄屏下大图居中失效，本质是视口宽度和图片固有尺寸冲突
直接给 <img> 设 max-width: 100% + margin: 0 auto 在窄屏上常会偏左或贴边——不是 CSS 写错了，而是图片原始宽高比远大于屏幕宽高比（比如一张 3840×2160 的大图在 375px 宽的 iPhone 上），此时 max-width: 100% 只约束了宽度，高度仍按比例撑开，导致父容器高度不可控，margin: 0 auto 失去作用基础。
- 别依赖
text-align: center：它只管水平，且对脱离文档流或 flex 子项无效 - 别用
width: 100vw：会超出 viewport（含 scrollbar 宽度），尤其 iOS Safari 下易触发横向滚动 - 真正有效的起点是：先限制宽度，再确保高度自适应，最后用布局机制居中
overflow: hidden 不是万能解，反而会切掉关键内容
很多开发者一见溢出就加 overflow: hidden，结果大图被裁成“半张脸”。这不是 bug，是预期行为——overflow: hidden 对 position: static 的 <img> 仅在父容器有明确宽高时才生效；若父容器靠内容撑开，它根本不起作用。
- 必须配合
max-width: 100%+height: auto才能防止拉伸变形 - 若父容器用了
flex或grid，overflow会影响子项伸缩行为，需额外设flex-shrink: 0或min-width: 0 - 移动端 Safari 对
overflow: hidden+transform组合有渲染延迟，慎用于模态图层
绝对定位 + transform 是窄屏大图居中的可靠组合
当图片尺寸远超屏幕，又必须完整显示、居中、不滚动时，position: absolute + transform: translate(-50%, -50%) 是目前最可控的方式。但必须注意：它依赖父容器为 position: relative，且不能和 flex / grid 父级混用。
- 父容器需设
position: relative，否则top: 50%会相对 viewport 计算 - 图片本身要设
max-width: 100vw和max-height: 100vh，再用object-fit: contain保证完整可见 - 避免写
left: 50%; top: 50%后直接transform：若图片未加载完成，offsetWidth为 0，计算会错位 - 推荐写法：
left: 0; right: 0; top: 0; bottom: 0; margin: auto;——更稳定，兼容 IE11+
移动端 touch 区域错位，常因未重置 viewport 缩放
点击缩略图弹出大图后，用户试图双指缩放，却发现手势没响应或区域偏移——大概率是 <meta name="viewport"> 缺失或 user-scalable=no 被误设。窄屏下大图交互依赖原生缩放能力，硬编码居中逻辑会破坏它。
- 必须确保
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> - 不要给大图容器设
touch-action: none，除非你完全接管手势逻辑 - 若用 JS 动态插入大图，需在
DOMContentLoaded后再绑定事件，避免因 DOM 未就绪导致getBoundingClientRect()返回 0
alt 文本是否仍准确）和后续维护成本。漏掉任意一环，下次改需求时还会掉坑里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
