jq_jquery を使用して div を中央に配置する良い方法を共有します

非常に短いバージョン:

复制代码代码如下:

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

ショートバージョン:

复制代代码如下:

(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、上: (上 > 0 ? トップ : 0) 'px'、左: (左 > 0 ? 左 : 0) 'px'});
});
}
} );
})(jQuery);

このコードによってアクティブ化されます:
$('#mainDiv').center();

プラグインのバージョン

复制代码代码如下:

(function($){
$.fn.extend({
center: function (options) {
var options = $.extend({ // デフォルト値
inside:window, // 要素、ウィンドウの中心
transition: 0, // ミリ秒、遷移時間
minX:0, // ピクセル、左要素の最小値
minY:0, // ピクセル、最上位要素の最小値
withScrolling:true, // boolean、スクロールバーを処理します (scrollTop)
vertical:true, // boolean, 中央垂直
horizo​​ntal:true // boオレーン、中央横
}, options);
return this.each(function() {
var props = {position:'absolute'};
if (options.vert ical) {
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.horizo​​ntal）{
var left =（$（options.inside）.width（） - $（this）.outerwidth（）） / 2;
if（options.withscrolling）left = $（options。内).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);

このコードによってアクティベートされます:

复制代代码如下:

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