基于jQuery实现的水平和垂直居中的div窗口

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