Question

如何相对于屏幕水平和垂直居中div，而不是页面。因此，当用户向下滚动一个长页时，div保持水平和垂直居中？

Answer 1

这是一个纯CSS解决方案，请注意百分比和负边距。

div {
    position: fixed;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
}

Answer 2

<div>的CSS：

position: absolute
left : (centerofpagepixel.x - (width of div /2));
top : (centerofpagepixel.y - (height of div/2));

使用<div>上的jQuery设置上述内容。

您可以再次使用jQuery计算centerofpagepixel.x和y。可能会获得屏幕的宽度/高度并将它们除以2。

Answer 3

您也可以尝试以下方法：

HTML标记：

<div class="classname">text here</div>

CSS：

.classname {
    position:absolute;
    left:50%;
    top:50%;
    padding:10px;
    border:1px solid #ccc;
}

可以根据要求更改或删除边框和填充。另外，请确保父容器必须相对定位，即它应该有position:relative。

Answer 4

这是您的代码

<强> http://www.geekdaily.net/2007/07/04/javascript-cross-browser-window-size-and-centering/

将此事件附加到window.onscroll。不需要使用jQuery，试试这个

function addEvent(obj,ev,fn) {
  if(obj.addEventListener) obj.addEventListener(ev,fn,false);
  else if(obj.attachEvent) obj.attachEvent("on"+ev,fn);
}

addEvent(window,"scroll",yourfunction);

祝你好运

死亡集中的Div

4 个答案: