如何让元素同时实现顶部粘性定位与水平居中？

你的导航栏水平居中失效的核心原因是：position: sticky 的定位上下文是其所在的滚动容器（此处为被200vw宽度容器撑开的body），left: 50% 是相对于body的整体宽度而非视口（viewport），导致横向滚动时导航栏会偏离视口中心。

以下是两种可行的修复方案：

方案一：改用 fixed 定位（推荐，匹配「始终固定顶部」需求） #

将导航栏的定位方式改为fixed，此时定位上下文切换为视口，left: 50% 和 translate: -50% 就能基于视口实现稳定的水平居中，同时保持顶部固定：

body {
  text-align: center;
}

#header {
  background-color: yellow;
  width: max-content;
  position: fixed; /* 替换为fixed定位 */
  top: 0;
  left: 50%;
  translate: -50%;
  z-index: 999; /* 可选，确保导航栏不会被下方内容遮挡 */
}

#container {
  background-color: black;
  color: white;
  width: 200vw;
  height: 200vh;
  display: flex;
  justify-content: center;
  align-items: center; /* 修正align-content为align-items，实现垂直居中 */
  flex-direction: column;
}

方案二：保留 sticky 并修正定位上下文 #

如果必须保留sticky特性，可给导航栏包裹一个宽度为100vw的容器，将sticky的定位上下文限制在视口宽度范围内：

<div class="header-wrapper">
  <div id="header">
    I should always be at the top and centered
  </div>
</div>
<div id="container">
  <span>
  I am extremely large and wide
  </span>
</div>

body {
  text-align: center;
  margin: 0;
}

.header-wrapper {
  position: sticky;
  top: 0;
  width: 100vw;
  overflow: hidden;
}

#header {
  background-color: yellow;
  width: max-content;
  margin: 0 auto; /* 通过margin:auto实现水平居中 */
}

#container {
  background-color: black;
  color: white;
  width: 200vw;
  height: 200vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

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