50% 50% 不一定居中，因其将背景图自身坐标系中50%位置对齐容器中心，而非视觉主体；需按目标点在原图中的比例反向偏移计算 background-position 或改用 transform 精确控制。
background-position 用百分比时，为什么50% 50% 不一定居中？
因为 background-position: 50% 50% 的“50%”不是相对于屏幕，而是相对于**背景图自身尺寸和容器尺寸的差值**。当背景图比容器大（最常见情况），这个百分比实际表示：把背景图上那个“50% 50%”的点，对齐到容器的中心点。换句话说，它居中的是“图上的某个像素”，而不是“你想看的那个视觉主体”。
比如你有一张 2000×1200 的风景图，想让画面中人物的脸（位于图内坐标 x=820, y=460）永远落在浏览器视口正中心——这时直接写 50% 50% 会错位。
用 absolute + background-position 实现任意图内坐标居中
核心思路：把背景图当作一个可定位的“画布”，用绝对定位容器模拟“锚点”，再靠 background-position 反向偏移，把目标点拽到视口中心。
- 给容器设
position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;，确保它铺满视口 - 设
background-image，并关闭平铺：background-repeat: no-repeat; - 关键计算：若目标点在原图中是
(imgX, imgY)，图宽高为imgW × imgH，容器宽高为contW × contH（通常是100vw × 100vh），则： -
background-position横向 =50% - (imgX / imgW) * 100% -
background-position纵向 =50% - (imgY / imgH) * 100%
例如：图是 2000px × 1200px，人脸在 (820, 460)，那么：
立即学习“前端免费学习笔记（深入）”；
background-position: calc(50% - 41%) calc(50% - 38.33%); /* 即 9% 11.67% */
注意：CSS 中 calc() 支持混合单位，但百分比必须参与运算；若要兼容老浏览器，可提前算好小数（如 9% 11.67%）。
用 transform 替代 background-position 更直观？
当背景图是固定尺寸且你控制整个容器时，用 transform 移动容器本身，反而更可控、无精度损失。
- 容器设
background-image，尺寸设为原图大小（width: 2000px; height: 1200px;） - 用
transform: translate(-50%, -50%)居中容器本身 - 再叠加反向偏移：横向移动
-(820 / 2000) * 100%，纵向-(460 / 1200) * 100% - 最终
transform: translate(calc(-50% + 41%), calc(-50% + 38.33%))
优势：不依赖 background-position 的相对计算逻辑，缩放或视口变化时行为更可预测；缺点：需知道图的确切像素尺寸，且容器会脱离文档流。
响应式下怎么保持图内点始终居中？
纯 CSS 难以动态响应图片缩放比例变化。如果背景图用了 background-size: cover 或 contain，它的实际渲染尺寸会变，导致之前算好的百分比失效。
- 最稳方案：放弃
background-image，改用<img>标签 +object-fit: cover+position: absolute定位 - 然后用 JS 监听
resize，实时读取图片渲染后的getBoundingClientRect()和目标点映射位置，动态设置transform - 若坚持纯 CSS，只能限定一种缩放模式（如固定
background-size: 100% 100%），并接受拉伸失真
多数人卡在这里：以为 background-position 是万能锚点工具，其实它只在背景图尺寸固定、缩放方式明确的前提下才可精确控制。
