jquery实现水平垂直居中

在建立网页布局的时候，我们经常会面临一个问题，就是让一个div实现水平和垂直居中，虽然好几种方式实现，但是今天介绍时我最喜欢的方法，通过css和jQuery实现。
1、通过css实现水平居中：

.className{
 margin:0 auto;
 width:200px;
 height:200px;
}

2、通过css实现水平居中和垂直居中

通过css创建一个水平居中和垂直居中的div是一件比较麻烦的事情，您必须事先知道另外一个div的尺寸：

.className{
 width:300px;
 height:200px;
 position:absolute;
 left:50%;
 top:50%;
 margin:-100px 0 0 -150px;
}

3、通过jQuery实现水平居中和垂直居中前面已经提到过了，css的方法只适用于有固定尺寸的div，所以到jQuery发挥作用了：

$(window).resize( function (){
 $( ' .className ' ).css({
  position: ' absolute ' ,
  left: ($(window).width()  -  $( ' .className ' ).outerWidth()) / 2,
   top: ($(window).height()  -  $( ' .className ' ).outerHeight()) / 2 + $(document).scrollTop()
 });
});
// 初始化函数
$(window).resize();

这种方法的好处是您无需知道div有多大，缺点是它只能通过JavaScript实现。

转载于:https://www.cnblogs.com/zzcflying/archive/2012/06/13/2547575.html