CSS滚动时视口居中粘性图片：初始阶段位置异常求助

你的问题出在将position: sticky直接应用在图片上，且未正确设置父容器的布局规则，导致定位计算出现偏差。以下是修正方案：

修正后的CSS代码 #

html,
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

h1 {
  margin: 16px;
}

p {
  margin: 16px;
}

.container {
  display: flex;
}

.text-container {
  width: 50%;
}

/* 核心修改：将sticky定位应用到图片容器 */
.image-container {
  position: sticky;
  top: 0;
  width: 50%;
  height: 100vh; /* 让容器高度与视口一致 */
  display: flex;
  align-items: center; /* 垂直居中图片 */
  justify-content: center; /* 水平居中图片 */
}

img {
  width: 100%;
  height: auto;
  max-width: 600px; /* 可选：限制图片最大宽度，避免超出容器 */
}

修正逻辑说明 #

1. 迁移sticky定位到父容器：直接给图片设置sticky时，定位上下文受图片自身尺寸影响，top:50%结合transform: translateY(-50%)的组合容易因父容器无固定高度导致滚动偏移。将sticky属性赋予.image-container后，容器成为固定定位的载体，彻底避免图片尺寸干扰定位逻辑。
2. 设置容器高度为100vh：让图片容器始终占据整个视口高度，确保滚动过程中容器能稳定固定在视口内，不会因内容高度不足提前脱离sticky状态。
3. 用Flex实现原生居中：通过容器的flex布局属性，让图片在容器内自动完成水平垂直居中，无需依赖transform，彻底解决偏移问题。

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