very short version:

[html]

复制代码 代码如下:

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

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

short version:

[html]

复制代码 代码如下:

(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);

(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 :

复制代码 代码如下:

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

[javascript]

复制代码 代码如下:

(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);

[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);

PLUGIN VERSION

[javascript]

复制代码 代码如下:

(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);

复制代码 代码如下:

(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代码，让人叹为观止。

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