transform-origin: center 不起作用的根本原因是内联元素（如 img）默认为 static 定位，需显式设置 position: relative 才能使其成为独立 transform 原点上下文；双指缩放还需动态更新 transform-origin 并叠加 translate 补偿。
transform-origin: center 为什么不起作用
写了 transform-origin: center 但缩放时元素还是绕左上角转，根本原因是 img 或其他内联元素默认是 static 定位，浏览器不会把它当作独立坐标系来计算原点。它会向上查找最近的块级包含块（比如父 div），导致中心点漂移。
必须显式给目标元素加 position: relative，强制它成为自己的 transform 原点上下文；或者用一个 div 包裹它，并设 display: inline-block，再对内部元素应用 transform-origin。
- 别依赖父容器的
text-align: center—— 那只影响行内流排版，不改变 transform 原点 - 如果用 JS 动态设置
style.transform，每次都要同步写style.transformOrigin = 'center'，否则 CSS 类里的声明可能被内联样式覆盖 - 避免混用 class 控制
transform和 JS 控制scale()，优先统一用 JS 维护完整字符串（如scale(${s}) translate(${x}px, ${y}px)）
双指缩放中点定位必须实时更新
移动端手势缩放不是“以图片中心为锚点放大”，而是以两指当前中心点为缩放原点。如果只设一次 transform-origin: center，缩放过程中两指移动，原点就错位了——图片会突然“滑走”或抖动。
正确做法是在 touchstart 和 touchmove 中持续计算两指中点坐标，并动态设置 transform-origin：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
touchstart里：取e.touches[0]和e.touches[1]，算出中点midX、midY（相对于元素左上角） -
touchmove里：重新计算中点，并立即执行el.style.transformOrigin = `${midX}px ${midY}px` - 注意：这些坐标要基于
el.getBoundingClientRect()转换为相对元素自身的偏移，不能直接用clientX/clientY
缩放后位置偏移？得补 translate 补偿
单纯改 scale() 会让元素尺寸变大，但左上角坐标不变，视觉上就像“向右下膨胀”。若想保持某一点（比如两指中点）在原位，必须叠加反向 translate() 补偿。
例如：缩放前中点在元素内坐标是 (mx, my)，缩放后该点实际会跑到 (mx * scale, my * scale)，所以要额外加 translate(-mx * (scale - 1), -my * (scale - 1)) 把它拉回来。
- 这个补偿量必须随每次
scale变化重算，不能只做一次 - 如果同时支持 wheel 缩放和 touch 缩放，wheel 的补偿要用鼠标相对于元素的坐标，而 touch 的补偿要用两指中点，二者逻辑不能复用
- 别忘了在
touchmove开头加e.preventDefault()，否则 iOS Safari 会抢事件并触发整页缩放
viewport 设置稍有偏差，整个手势就失效
很多人为了“禁页面缩放”把 user-scalable=no 写死，结果自己的双指缩放 JS 一毛不响应——这不是代码问题，是 iOS 硬性限制：只要关了 user-scalable，系统连 touchstart 都不派发。
安全配置是：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
-
maximum-scale=5.0是经验值，再高容易让图片缩放后超出视口且无法拖回 - 千万别用
touch-action: none封禁，它会同时干掉pinch-zoom和pan-x/pan-y，手势直接瘫痪 - 如果真要禁全局缩放又保留局部手势，目前无解；iOS 不开放这个权限
真正难的不是写出缩放逻辑，而是让缩放中心始终贴合手指、缩放过程不跳变、缩放后能拖回边界——这三点全靠中点坐标、补偿 translate 和 origin 动态更新三者咬合，漏掉任一环，用户就会觉得“卡顿”或“失控”。
