死心潜水

Dead Centered Div

本文关键字：潜水      更新时间：2023-09-26

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

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

http://jsfiddle.net/R7Xy2/

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

这是您的代码

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);

祝好运

您也可以尝试以下操作：

HTML标记：

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

CSS：

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

边框和填充可以根据需要进行更改或删除。此外，请确保父容器必须相对放置，即它应该具有position:relative。

<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。

相关文章：