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标签也能起到居中作用,如果您感兴趣的话可以对这个小插件进行一些扩展,让他的功能更加强大实用~