如何在高度可增加的容器可滚动容器div内居中div

Question

我有一个父div，它显示注释，并且高度设置为720px。但是，它是可滚动的，并且添加了更多注释，它们被推入，用户可以在其中滚动更多。

我想要一个带有灰色背景和按钮的叠加层，但div仍可滚动。
我尝试使用position: fixed，但似乎并没有实现我想要的功能。

.parent {
  height: 720px;
  overflow-y: auto;
  overflow-x: hidden;
}

<div class="parent">
  <div class="overlay"></div>
</div>

Answer 1

这是一个即使滚动时div仍居中的示例。

如果需要，可以添加一个按钮。

.parent {
  height: 720px;
  overflow-y: auto;
  overflow-x: hidden;
  background: blue;
}

.overlay{
  background: grey;
  margin: auto 25%;
  text-align: center;
  height: 10%;
  width: 50%;
  position: fixed;
  z-index: 999;
}

<div class="parent">
  <div class="overlay">Overlay Div</div>
</div>