滚动后,将元素放置在屏幕中间

Question

我的页面是屏幕高度的2倍(大小因页面上的其他项目而异).无论滚动位置如何,我都希望在屏幕中间显示一个绝对定位的SPAN.

我在按钮单击时应用以下样式,但是如果我一直向下滚动,则元素显示在页面的最顶部,因为它从整个页面的顶部开始计算50%.

.Centered {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 45%;
}

如何根据按钮单击时的滚动部分将元素放置在页面中间？

谢谢.

Answer 1

你确定你不想要固定定位吗？

绝对定位将项目定位在页面的上下文中,因此它将随页面向上和向下滚动.固定定位将项目定位在视口的上下文中,因此它不随页面移动.相反,无论你如何滚动,它都会保持在相同的位置.

.Centered
{
  width:100%;
  position:fixed;
  top:50%;
  left:45%;
}

此页面上的菜单是固定定位的一个很好的例子.