1. ホーム
  2. javascript

[解決済み] jQueryを使用してDIVを画面の中央に配置する

2022-03-22 04:11:51

質問

を設定するにはどうしたらいいのでしょうか? <div> をjQueryを使って画面中央に配置することはできますか?

解決方法は?

私は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;
}

あとは書くだけです。

$(element).center();

デモの様子 フィドル (パラメータを追加した場合)