页面缩放时图片左右偏移，如何通过CSS固定图片位置？

你的问题出在当前的定位组合上：position:relative 配合 margin:0 auto 和 transform:translate，当页面尺寸变化时，margin:auto 会重新计算元素的居中位置，再加上固定像素的偏移，就导致了图片左右移动。要让图片保持固定位置，我们可以调整定位方式：

方案一：固定在视口的某个位置（比如右侧固定距离） #

如果希望图片始终停留在视口的某个固定位置（比如距离右侧一定像素），可以用 position:fixed 直接基于视口定位，这样无论页面怎么缩放，它的位置都不会变：

.imagee {
  /* 不需要relative定位了，fixed直接基于视口生效 */
}
.circle {
  border-radius: 50%;
  width: 300px;
  height: 300px;
  /* 去掉原有的margin:auto和transform，改用fixed定位 */
  position: fixed;
  right: 30px; /* 距离右侧30px，可根据需求调整 */
  top: 50%; /* 可选：让图片垂直居中 */
  transform: translateY(-50%); /* 配合top:50%实现精准垂直居中 */
}

<div class="imagee">
  <img class="circle" src="https://dummyimage.com/600x400/000/fff" />
</div>

方案二：相对于父容器固定位置 #

如果希望图片相对于父容器（.imagee）保持固定位置，不随页面尺寸变化偏移，可以给父容器设置固定宽度，再用 position:absolute 定位：

.imagee {
  position: relative;
  width: 1200px; /* 给父容器设置固定宽度，避免窗口变化时父容器宽度改变 */
  margin: 0 auto; /* 可选：让父容器在页面中居中 */
  height: 600px; /* 父容器需要设置高度，否则absolute元素会脱离文档流找不到参照 */
}
.circle {
  border-radius: 50%;
  width: 300px;
  height: 300px;
  position: absolute;
  right: 0; /* 相对于父容器右侧对齐 */
  top: 20px; /* 相对于父容器顶部偏移20px，可调整 */
}

<div class="imagee">
  <img class="circle" src="https://dummyimage.com/600x400/000/fff" />
</div>

原代码偏移的原因 #

• margin:0 auto 会让 .circle 在父容器中水平居中，当页面宽度变化时，若父容器是自适应宽度，居中的基准位置就会改变；
• transform: translate(-345px, 0) 是在居中位置的基础上再往左偏移固定像素，所以窗口宽度变化时，整体位置就会跟着移动。

换成固定定位（fixed/absolute）后，元素的位置不再依赖于父容器的居中计算，就能稳定保持在你想要的位置了。

内容的提问来源于stack exchange，提问作者Cubex