Html 元素被推到页面上方，即使溢出设置为滚动

我的一个项目有问题。我将容器设置为100vh和100vw，并将溢出设置为“自动”。然而，即使有这些高度和宽度属性，以及溢出，似乎元素仍被推出div，我不知道为什么。例如，在这个div中，我有一个h1和一个图像。我有h1显示在图像上方；当我的屏幕高度太小时，我希望用户能够滚动。但是，即使设置了溢出，h1也会被完全推到页面上方，因此无法看到它，也无法向上滚动，只能滚动图像及其下方的所有内容

我的JSX：

<div id="SingleProjectContainer">
        <h1>{name}</h1>
            {images.map((image, idx) => (
              <div key={idx}>
                <img src={image} alt="Project Picture" />
              </div>
            ))}
      </div>

我尝试了许多组合的位置和保证金设置，但似乎没有任何效果。我不确定我是否还缺少另一个css属性。任何帮助都将不胜感激

回答意见：

---

这是一个好主意。删除

justify content

和

align items

并在子项上使用

margin:auto

。

是将其推出div还是窗口？因为现在有了你的位置和填充，div被稍微放在窗口外面。所以，现在的设置方式是，随着窗口高度变短，最上面的部分开始被推出div，因此被推出窗口（因为垂直高度为100vh）。卷轴确实如预期的那样出现，但如果有意义的话，即使是卷轴的顶部也只会上升到h1的右下方。啊，这是一个。建议不要使用

justify content

或

align items

，而是将

margin:auto

放在子项上。哇，我注意到刚才删除justify content后，它也不再这样做了。非常感谢你的帮助！我很感激，如果你把它放在下面，我会把它标记为答案。

#SingleProjectContainer {
  top: 0;
  padding: 10px;
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  flex-direction: column;
  overflow: auto;
  flex: auto;
}

#SingleProjectContainer h1 {
  font-size: 3em;
  margin: 10px;
  color: white;
}