本来jQuery有一个certer插件,不过少了一个功能,就是基于视口(ViewPort)的居中.

改写一下,代码如下:

Js代码  

1. jQuery.fn.center = function(f) {  
2.     return this.each(function(){  
3.         var p = f===false?document.body:this.parentNode;  
4.         if ( p.nodeName.toLowerCase()!= "body" && jQuery.css(p,"position") == 'static' )  
5.             p.style.position = 'relative';  
6.         var s = this.style;  
7.         s.position = 'absolute';  
8.         if(p.nodeName.toLowerCase() == "body")  
9.             var w=$(window);  
10.         if(!f || f == "horizontal") {  
11.             s.left = "0px";  
12.             if(p.nodeName.toLowerCase() == "body") {  
13.                 var clientLeft = w.scrollLeft() - 10 + (w.width() - parseInt(jQuery.css(this,"width")))/2;  
14.                 s.left = Math.max(clientLeft,0) + "px";  
15.             }else if(((parseInt(jQuery.css(p,"width")) - parseInt(jQuery.css(this,"width")))/2) > 0)  
16.                 s.left = ((parseInt(jQuery.css(p,"width")) - parseInt(jQuery.css(this,"width")))/2) + "px";  
17.         }  
18.         if(!f || f == "vertical") {  
19.             s.top = "0px";  
20.             if(p.nodeName.toLowerCase() == "body") {  
21.                 var clientHeight = w.scrollTop() - 10 + (w.height() - parseInt(jQuery.css(this,"height")))/2;  
22.                 s.top = Math.max(clientHeight,0) + "px";  
23.             }else if(((parseInt(jQuery.css(p,"height")) - parseInt(jQuery.css(this,"height")))/2) > 0)  
24.                 s.top = ((parseInt(jQuery.css(p,"height")) - parseInt(jQuery.css(this,"height")))/2) + "px";  
25.         }  
26.     });  
27. };  

使用,

Js代码  

1. $(expr).center();  
2. $(expr).center(false);  

如果expr 的 parentNode 是body 或者参数是 false的话就会真的 ViewPort 居中.

另外加的偏移量 10 是个偷懒的方法,比如有了滚动条,会好一些,没有的话视觉上也差别不大,不过没有这个偏移量又有 滚动条的话 视觉上就不太舒服了