javascript - 垂直居中 div 时无法平滑滚动

Question

我有一个垂直和水平居中的 div:

#mydiv {
  width:960px;
  height:400px;
  position:fixed;
  margin-left:-480px;
  margin-top:-200px;
  top:50%;
  left:50%;
}

当我使用 Smoothscroll.js 库时，它不起作用。如果我删除“position:fixed/position:absolute”它会这样做，但我的 div 不再居中。有什么办法可以同时实现平滑滚动和居中吗？

Answer 1

我自己找到了解决这个问题的办法。我在屏幕顶部制作了一个假的(不可见的)div，它会根据屏幕大小改变高度。然后我将我的可见 (#mydiv) 放在它下面，没有任何 css 定位。

#mydivfake {
  width:1000px;
  height: calc(50vh - 310px); /*310px is half of the height of my visible centered div*/
  margin-left:-500px;
  left:50%;
}