jQueryを使用してDIVを画面の中央に配置するにはどうすればよいですか?

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

Web を作成する場合、HTML 要素を画面の中央に配置するのは一般的なタスクです。アプリケーション。この記事では、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 要素を中央に配置できます:

$(element).center();

これにより、要素は画面の垂直方向と水平方向の中央に正確に配置されます。

追加注:

この関数には、垂直オフセットを調整するパラメーターも含まれています。たとえば、要素を上から 50 ピクセルの中央に配置するには、次を使用します:

$(element).center({top: -50});

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