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

时间:2019-04-29 15:56:38

标签: javascript jquery html

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

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

.parent {
  height: 720px;
  overflow-y: auto;
  overflow-x: hidden;
}
<div class="parent">
  <div class="overlay"></div>
</div>

1 个答案:

答案 0 :(得分:0)

这是一个即使滚动时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>