使用jQuery创建水平和垂直居中的网站

在大分辨率，特别是4:3的时候很奇怪，所以想让网页水平垂直都居中，就是让一个div实现水平和垂直居中，虽然好几种方式实现，但是今天介绍时我最喜欢的方法，通过css和jQuery实现。

1、通过css实现水平居中：

1 2 3 4 5

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

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

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

1 2 3 4 5 6 7 8

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

3、通过jQuery实现

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

1 2 3 4 5 6 7 8 9

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