使用jq让你的div居中的好方法。

very short version:

$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'});

short version:

(function($){    $.fn.extend({        center: function () {            return this.each(function() {                var top = ($(window).height() - $(this).outerHeight()) / 2;                var left = ($(window).width() - $(this).outerWidth()) / 2;                $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});            });        }    }); })(jQuery);

Activated by this code :

(function($){     $.fn.extend({          center: function (options) {               var options =  $.extend({ // Default values                    inside:window, // element, center into window                    transition: 0, // millisecond, transition time                    minX:0, // pixel, minimum left element value                    minY:0, // pixel, minimum top element value                    withScrolling:true, // booleen, take care of the scrollbar (scrollTop)                    vertical:true, // booleen, center vertical                    horizontal:true // booleen, center horizontal               }, options);               return this.each(function() {                    var props = {position:'absolute'};                    if (options.vertical) {                         var top = ($(options.inside).height() - $(this).outerHeight()) / 2;                         if (options.withScrolling) top += $(options.inside).scrollTop() || 0;                         top = (top > options.minY ? top : options.minY);                         $.extend(props, {top: top+'px'});                    }                    if (options.horizontal) {                          var left = ($(options.inside).width() - $(this).outerWidth()) / 2;                          if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;                          left = (left > options.minX ? left : options.minX);                          $.extend(props, {left: left+'px'});                    }                    if (options.transition > 0) $(this).animate(props, options.transition);                    else $(this).css(props);                    return $(this);               });          }     });})(jQuery);

Activated by this code :

$(document).ready(function(){    $('#mainDiv').center();    $(window).bind('resize', function() {        $('#mainDiv').center({transition:300});    }););

观此人JS代码，让人叹为观止。

简洁明了。却又举一反三。