jquery Div Center Technique Application Introduction _jquery

Very short version:
[HTML]

Copy Code code as follows:

$ (' #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]

Copy Code code as follows:

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

Copy Code code as follows:

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

[JavaScript]

Copy Code code as follows:

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

Copy Code code as follows:

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

Copy Code code as follows:

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

Copy Code code as follows:

$ (document). Ready (function () {
$ (' #mainDiv '). Center ();
$ (window). Bind (' Resize ', function () {
$ (' #mainDiv '). Center ({transition:300});
});
);

View this person JS code, let the person is breathtaking.
Concise and clear. but also extrapolate.