在做了一些调查之后我发现了这个：
Why is my element not sticking to the left when using position sticky in css?
本质上，它不会粘在一起，因为身体会自动膨胀到一个非常大的盒子的宽度。
将其放在内联块容器中将使宽度不会自动扩展到子级，从而允许粘附行为。
这是可行的：

body {
    text-align: center;
}

#header {
    background-color: yellow;
    width: max-content;
    position: sticky;
    top: 0;
    left: 50%;
    translate: -50%
}

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

#whole-thing {
    display: inline-block;
}

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

不同位置：粘滞和垂直定位，left: 50%不是动态定位选项;它只是设置初始位置。一个水平滚动条仍然会导致它移动，这样它就保持"离左边缘50%"。
要实现固定的左右位置，可以在header周围添加一个带有position: fixed的header容器，在该容器中，header div可以获得auto的边距：

body {
  text-align: center;
  max-width:100vw;
  overflow:scroll;
}

/*added*/
#headercontainer{
  position:fixed; 
  width:100vw;
  left:0;
  top:0;
}
#header {
  background-color: yellow;
  width: max-content;
  /*left: 50%;*/ /*Removed*/
  margin:auto;/*added*/
}

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

<div id="headercontainer"> <!-- added -->
    <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>

你是说像这样的东西？：

<div id="header-container">
  <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;
}

#header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  overflow: auto;
  background-color: yellow;
}

#header {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
}

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