jquery div 居中技巧应用介绍

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代码，让人叹为观止。
简洁明了。却又举一反三。