Question

我的页面是屏幕高度的2倍（大小因网页上的其他项目而异）。无论滚动位置如何，我都希望在屏幕中间显示绝对定位的SPAN。

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

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

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

谢谢。

Answer 1

您确定不想要fixed positioning吗？

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

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

菜单on this page是固定定位的一个很好的例子。

Answer 2

.Centered 
{
    position:absolute;   
    width:100%;
    top:50%;
    left:50%;
    margin-height: -200px;
    max-height: 400px;
}

这样就可以找到适合max-height的值。

Answer 3