滚动后将元素定位在屏幕中间答案

【问题标题】：Position element in the middle of the screen after scrolling滚动后将元素定位在屏幕中间
【发布时间】：2009-02-26 06:55:29
【问题描述】：

我的页面是屏幕高度的 2 倍（大小取决于页面上的其他项目）。无论滚动位置如何，我都想在屏幕中间显示一个绝对定位的 SPAN。

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

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

如何根据单击按钮时的滚动量将元素定位在页面中间？

谢谢。

【问题讨论】：

【解决方案1】：

您确定不想要fixed positioning？

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

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

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

【讨论】：

这center到底是怎么回事？
Timwi: 好吧，我没有应用它的 HTML roman m，但 top:50% 会将 .Centered 元素移动到页面的中间，left:45% 将移动它大部分朝向水平中间。因此，宽度约为页面宽度 10% 的细元素将居中显示。

【解决方案2】：

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

这样，技巧就变成了为最大高度找到合适的值。

【讨论】：

【解决方案3】：

尝试使用jQuery Center Plugin。

【讨论】：