jQueryを使用してDIV要素をWebページの中央に配置するにはどうすればよいですか?

jQuery を使用して Web ページの中央に DIV を配置する

DIV 要素を画面上で中央に配置することは、Web 開発における一般的な要件です。 。 jQuery は、これを実現するための便利なソリューションを提供します。

解決策:

jQuery を使用して DIV を中央に配置するには、次の関数を利用できます:

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

この関数は、画面サイズと DIV に基づいて中心座標を計算することにより、DIV の位置を変更します。ディメンション。

使用法:

関数を jQuery に追加したら、次の構文を使用してターゲット DIV で呼び出すだけです:

$(element).center();

これにより、DIV が中央に配置されます。

デモ:

この機能をデモンストレーションするには、次の Fiddle を参照できます。これには、センタリング精度を制御するための追加パラメータが含まれています:

[Fiddle Link]

この jQuery 関数を利用すると、任意の DIV 要素を Web 上の中央に簡単に配置できます。ページ。

以上がjQueryを使用してDIV要素をWebページの中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。