根本原因是定位上下文缺失或错配：图片容器未设position: relative，导致绝对定位文字以body为基准而非图片；必须用包裹div设relative，再配合top/left 50%和transform居中。
为什么图片缩放后文字会“跑偏”
根本原因不是 CSS 写错了，而是定位上下文缺失或错配。position: absolute 的元素一旦父容器没设 position: relative，它就会向上逐级找最近的已定位祖先——经常落到 body 上，导致文字始终以整个视口为基准居中，而非以图片为基准。窗口缩放时，图片尺寸变化，但文字锚点不动，自然偏移。
必须给图片容器加 position: relative
这是所有居中方案的前提，没有这一步，后续都白搭。
-
img标签本身不能当定位上下文，它默认是static - 得用一个包裹
img的div（或直接用figure），并显式设置position: relative - 如果用了
picture或srcset，这个包裹容器仍需存在且带position: relative
居中文本的标准三件套不能少
只写 top: 50% 和 left: 50% 是常见错误——它把元素左上角钉在中心点，不是内容居中。必须补上 transform: translate(-50%, -50%) 抵消自身宽高。
- 文本容器需设
position: absolute，且是图片容器的直接子元素（不推荐嵌套多层） - 必须同时声明
top: 50%、left: 50%、transform: translate(-50%, -50%)，缺一不可 - 避免手写
left: 12px或top: 20%这类硬编码值，它们在缩放时必然失效
Flex 布局更适合整图居中，但别混用
如果目标只是让整张图在页面/容器中随窗口缩放而居中，display: flex 更可靠；但它和绝对定位文本不是同一套逻辑，强行套在一起容易冲突。
立即学习“前端免费学习笔记（深入）”；
- 用 Flex 居中图：父容器设
display: flex; justify-content: center; align-items: center; height: 100vh，图加max-width: 100%; height: auto - 若还要在图上叠文字，仍需在图的包裹容器上加
position: relative，再用绝对定位+transform 方案叠加文字 - 别在一个容器里既用
flex对齐图，又用absolute叠文字——flex 容器的align-items会影响绝对定位子元素的top计算基准
position: relative 容器可能高度塌陷，导致绝对定位的文字掉出可视区。务必为容器预设最小尺寸（如 min-height: 200px）或配合 aspect-ratio + height: 0 占位。 
