jQuery实现DIV水平和垂直居中小插件（非常轻量级） http://www.skygq.com/2010/12/26/jquery-auto-middle-plugins/
接下来看看Jquery是如何实现的：
jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS，获取DIV的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度，得到的值再除以2即左偏移量，右偏移量算法相同。代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 |
;(function($){ $.fn.autoMiddle = function(){ return this.each(function(){ $(this).css("position","absolute"); $(this).css({ "left": ($(window).width() - $(this).outerWidth())/2, "top": ($(window).height() - $(this).outerHeight())/2 }); }); } })(jQuery); |
使用方法也非常简单
|
1 2 3 |
$(function(){ $("选择器").autoMiddle(); }); |
其实这个插件不光是对DIV，像span呀，font呀，ul呀，h1呀，h2呀等等一些HTML标签也能起到居中作用，如果您感兴趣的话可以对这个小插件进行一些扩展，让他的功能更加强大实用~
