ベストセラー人気 WordPress テーマTop 30 詳細

jQueryを使用してDIVを画面中央に配置する

Last Updated:2020年11月15日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

jQueryを使用してDIVを画面中央(中央)に配置するには、次のjQueryのスクリプトを使用することができます。

jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
// Source: stackoverflow

次のコードで上位DIVの中央に配置されます。

$("element").center();

垂直(縦)には、中央に配置する必要がない場合、this.css( "top"、...); 行を削除します。

次のようなjQueryのスクリプトも可能です。

$.fn.center = function() {
this.css({
'position': 'fixed',
'left': '50%',
'top': '50%'
});
this.css({
'margin-left': -this.outerWidth() / 2 + 'px',
'margin-top': -this.outerHeight() / 2 + 'px'
});

return this;
}

jQueryの代わりに簡単に次のようなCSSコードを使用することもできます。

.center {
position: absolute; /* */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 48%;
height: 59%;
}

CSSを使用する場合は、上記のコードより div内のdivを中央に配置する 記事で紹介された方法を試してみてください。 ほとんどのケースでうまく動作します。



コメントを残す

コメント