让div垂直居中于浏览器窗口

时间:2023-01-01 06:30:39

<style type="text/css">
 
 div  {
   position:absolute;
   top:50%;
   left:50%;
   margin:-150px 0 0 -200px;
   width:400px;
   height:300px;
   border:1px solid #008800;
 }

</style>
<div>让层垂直居中于浏览器窗口</div>

其实解决的思路是这样的:首们需要position:absolute;绝对定位。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

如:一个层宽度是400,高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为-150。margin-left的值为-200。这样我们就实现了层垂直居中于浏览器的样式编写。

jQuery实现水平和垂直居中

jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS,获取DIV的左、上的边距偏移量,边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度,得到的值再除以2即左偏移量,右偏移量算法相同。注意DIV的CSS设置要在resize()方法中完成,就是每次改变窗口大小时,都要执行设置DIV的CSS,代码如下:

$(window).resize(function(){     $(".mydiv").css({         position: "absolute",         left: ($(window).width() - $(".mydiv").outerWidth())/2,         top: ($(window).height() - $(".mydiv").outerHeight())/2     });        }); 

此外在页面载入时,就需要调用resize()。

$(function(){     $(window).resize(); }); 

此方法的好处就是不需要知道DIV的具体宽度和高度大小,直接用jQuery就可以实现水平和垂直居中,而且兼容各浏览器,这个方法在很多的弹出层效果中应用。

tips:在页面的外面建一个table,设置高度为100%,然后设置td垂直居中显示,把页面套进去就OK拉!