JavaScript で Div を中央に配置し、ページ サイズの変化に応じて変更する_JavaScript のヒント

Java をバックエンドとして使用する場合、私はいつもログイン ページを作成しますが、ページは中央に配置する必要がありますが、色付きではなく、色付きにする必要がありますが、どうしてもログイン ボックスが見苦しくなります。中心に！以前のアイデアは、CSS Div を使用して div を中央に配置することでしたが、現在は JavaScript を使用して、単純に Div をページの中央に配置し、Web ページのサイズの変更に応じて変更を加えることができます。センタリングの原理を理解していれば、それは簡単に達成できます。
まずセンタリングの原理を見てみましょう。
まず写真を見てください。

写真の中に何が見えますか?赤いボックスが中央に配置されていることがわかります。なぜ中央に配置されているのでしょうか。観察すると、赤枠の上下の青の間隔線は同じ長さで垂直方向のセンタリングが保証され、赤枠の左右の緑の間隔線も同じ長さで水平方向のセンタリングが保証されていることがわかります。センタリング。
しかし、上部と下部の間隔を等しくするにはどうすればよいでしょうか?左右の間隔は均等ですか？
画像を見る:

現在の Web ページの高さが 350 ピクセル、幅が 400 ピクセル、赤いボックスの高さが 150 ピクセル、幅が 200 ピクセルであると仮定します。 Web ページの高さが 200 ピクセルから減算されることを確認します。赤いフレーム要素の高さは 200 ピクセルであり、これらの 200 ピクセルは上下のマージンの合計です。同様に、左右のマージンはそれぞれ 100 ピクセルです。は同じです。
何か感じましたか？
Web ページ要素の高さまたは幅がわかっている場合、要素の高さまたは幅を減算して 2 で割ると、上下左右の余白間の距離が得られます。通常、要素の位置をどのように決定するのでしょうか?全て上と左の座標で決まるんじゃないでしょうか？では、赤いボックスの座標は今どうなっているでしょうか?
別の画像を見てください:

赤いボックスの座標は、青い上の線 100px と緑の左の線 100px で、これら 2 つの値は left と top です。計算されていませんか？
式は次のように要約できます。
中央に配置された要素の上部 = (Web ページの高さ – 要素の高さ) / 2
中央に配置された要素の左 = (Web ページの幅 –要素の幅) /2;
JavaScript に変換された構文は次のとおりです:
top = (document.body.clientHeight - element.offsetHeight)/2;
left = (document.body.clientWidth - element.offsetWidth)/2
Get 上と左の座標が中央にずれています。
以下はセンタリングの完全なコードです:
ここで注意すべき点がいくつかあります。要素の位置属性を絶対 (絶対配置) に設定してから、onload の 2 つのイベントを追加する必要があります。 onresize と px 文字列を追加します。 offsetHeight は要素自体の高さを取得し、 offsetWidth は要素自体の幅を取得します。これは、Web ページが読み込まれるときと、サイズが変更されます。ただし、このアプローチでは要素と Web ページが中心に配置されます。ある要素を別の要素の内側に配置する場合も、原則は同じです。 Web ページの幅と高さのコードを別の要素の幅と高さのコードに変更するだけです。別の要素の幅と高さは、現在の要素の親要素の高さと幅から取得できます。これを中央に配置することもできます。 jqueryフレームワークを使用すると、コードがより簡単になります。
転載する場合は出典を明記してください。