transform-origin: center 不生效是因为 img 默认为 static 定位，需设 position: relative 或用 inline-block 包裹；动态缩放时须同步设置 transformOrigin；wheel 和 touch 缩放需结合鼠标/触点坐标做 translate 补偿。
transform-origin: center 不生效？检查图片定位上下文
写了 transform-origin: center 但图片还是绕左上角缩放，大概率是因为它没被当作独立的“定位上下文”来计算原点。默认情况下，img 是 static 定位，而 transform-origin 在 static 元素上会向上查找最近的块级包含块（比如父 div），而不是以图片自身中心为基准。
解决方法很简单：
- 给
img加position: relative，强制它成为自己的坐标系原点 - 或者更稳妥：用一个
div包住图片，设display: inline-block; text-align: center;，再对内部img应用transform和transform-origin: center - 别依赖父容器的
text-align: center来控制缩放中心——那只是水平居中，不影响transform-origin计算
缩放后图片“跑偏”？必须同步更新 transform-origin
哪怕一开始设了 transform-origin: center，只要后续 JS 动态改了 style.transform = 'scale(2)' 却没重设 origin，浏览器可能沿用旧计算逻辑，尤其在多次缩放或切换设备后，中心点容易漂移。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每次设置
scale()的同时，显式写上transform-origin: center，例如：img.style.transform = 'scale(${scale})'; img.style.transformOrigin = 'center'; - 如果用 CSS 类控制（如
.zoomed { transform: scale(1.8); }），确保该类里也声明了transform-origin: center - 避免混用内联 style 和 class 控制同一属性，CSS 优先级容易导致 origin 被覆盖
wheel 事件缩放时中心点偏移？要用鼠标坐标做局部补偿
只靠 transform-origin: center 无法解决滚轮缩放时“光标不在缩放中心”的问题。因为 wheel 事件的触发点是视口坐标，而缩放需要的是相对于图片左上角的局部坐标；不补偿的话，放大后图片内容会向左上“滑走”。
关键步骤：
- 在
wheel回调里，先调event.preventDefault()阻止页面滚动 - 用
img.getBoundingClientRect()拿到图片在视口中的位置，再算出鼠标相对图片左上角的偏移：const x = event.clientX - rect.left; const y = event.clientY - rect.top; - 缩放后，用这个偏移反推
translateX和translateY补偿量，保证该点始终在光标下 - 补偿值要随缩放系数动态重算，不能只做一次
移动端双指缩放 center 失效？别信 touch-action: manipulation
touch-action: manipulation 只能优化点击响应延迟，对双指缩放完全无效。iOS 和 Android 默认手势不会作用于单张 img 内部，必须手写 touchstart/touchmove 并手动维护缩放中心。
常见陷阱：
- 两指初始距离用
getDistance(e.touches[0], e.touches[1])算，但第一次touchmove时若未重置lastDistance，会导致缩放跳变 - 缩放中心不是屏幕中心，而是两指中点——得实时算
(t0.clientX + t1.clientX) / 2等，再转成图片局部坐标 - iOS Safari 需给模态层加
-webkit-overflow-scrolling: touch，否则缩放后拖拽卡顿，且必须加e.preventDefault()否则手势被系统拦截
缩放中心点不是写一行 CSS 就完事的事，它依赖定位上下文、事件坐标转换、移动端手势建模三者配合。最容易被忽略的是：每次缩放操作后，都得重新确认 origin 是否仍指向你想要的那个物理点——尤其是 modal 弹出后窗口尺寸变化、或用户缩放过又滚动过页面的情况。
