为什么position:sticky元素调整屏幕尺寸时会失去居中对齐？如何解决？

position: sticky 本质是相对定位和固定定位的结合，有一个核心的边界约束规则：sticky 元素永远不会超出其最近滚动祖先元素的内容盒范围。
你当前用left: 50% + transform: translateX(-50%)的居中逻辑，是基于父元素（默认是body，宽度与视口宽度一致）的宽度计算的：当视口宽度 >= 元素宽度（500px）时，偏移后的元素完全处于父元素范围内，居中效果正常。
当视口宽度 < 500px时，按你的偏移规则计算，元素的左边缘会跑到父元素左边缘的左侧，此时sticky的边界约束触发，会强制将元素的左边缘对齐父元素左边缘，你设置的left: 50%被约束规则覆盖，最终元素出现「卡住」、居中失效的表现。这也是它和fixed定位的核心差异：fixed相对于视口定位，没有父元素边界约束，所以不会出现这类问题。

可以根据业务场景选择对应方案：

• 方案1：用margin: 0 auto替代偏移居中（最常用）
  正常流的margin: 0 auto居中不会触发sticky的方向偏移约束，直接删掉原有偏移规则即可，适配绝大多数场景：

  div {
    height: 100px;
    width: 500px;
    background-color: red;
    position: sticky;
    margin: 0 auto;
  }
  

• 方案2：添加sticky父容器包裹（适合需要设置左右吸边阈值的场景）
  如果你需要给sticky元素设置左右偏移的吸边阈值，可以在外层套一个占满视口宽度的sticky父容器，子元素在父容器内居中即可：

  <div class="sticky-wrapper">
    <div class="content"></div>
  </div>
  

  .sticky-wrapper {
    position: sticky;
    left: 0;
    right: 0;
    width: 100%;
  }
  .content {
    height: 100px;
    width: 500px;
    background-color: red;
    margin: 0 auto;
  }
  

• 方案3：改成响应式宽度（适合移动端适配场景）
  给元素添加响应式宽度规则，让元素宽度永远不超过视口宽度，从根源上避免触发边界约束：

  div {
    height: 100px;
    width: 100%;
    max-width: 500px;
    background-color: red;
    position: sticky;
    left: 50%;
    transform: translateX(-50%);
  }
  

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