jQuery居中插件

说明

简单使用：

$('#cbox1').center();

不是所有人都喜欢让某元素垂直居中，同时想要它跟随屏幕滚动的话，可以这样配置(所有在此合理配置的CSS样式都将被应用)：

$('#cbox2').center({position:'fixed',top:'30%'});

要让#cobx1脱离父容器(假定它是静态定位)的话：

$('#cbox1').center({relative:false});

更多的要求就要再次扩展了。

代码

(function ($) {
  $.fn.center = function (settings) {
    var style = $.extend({
			position: 'absolute', //absolute or fixed
			top     : '50%', //50%即居中，将应用负边距计算，溢出不予考虑了。
			left    : '50%',
			zIndex  : 2009,
			relative: true //相对于包含它的容器居中还是整个页面
    }, settings || {});

    return this.each(function () {
      var $this = $(this);

      if (style.top == '50%') style.marginTop = -$this.outerHeight() / 2;
      if (style.left == '50%') style.marginLeft = -$this.outerWidth() / 2;
      if (style.relative && !$this.parent().is('body') && $this.parent().css('position') == 'static') $this.parent().css('position', 'relative');
      delete style.relative;
      //ie6
      if (style.position == 'fixed' && $.browser.version == '6.0') {
        style.marginTop += $(window).scrollTop();
        style.position = 'absolute';
        $(window).scroll(function () {
          $this.stop().animate({
            marginTop: $(window).scrollTop() - $this.outerHeight() / 2
          });
        });
      }

      $this.css(style);
    });
  };
})(jQuery);

下载、查看(非IE获得最佳效果)

http://files.cnblogs.com/ambar/jQuery/center-plugin-jQuery-ambar.htm

转载于:https://www.cnblogs.com/ambar/archive/2009/11/04/jQuery-center.html