サイズに関係なく、要素をブラウザ ウィンドウの中央に完全に配置するにはどうすればよいですか?

ブラウザ ウィンドウ内の要素の完璧なセンタリング

ウィンドウの寸法やツールバーの構成に関係なく、ブラウザ ウィンドウ内の要素を正確かつ安定してセンタリングします。 、または画面解像度に応じて、次のソリューションが効果的なアプローチを提供します。

この中央揃えを実現するには、要素問題の、たとえば

には、次の CSS プロパティを割り当てる必要があります:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

1. 位置: 絶対: このプロパティは、通常のドキュメントから要素を削除します。フローなので、ブラウザ ウィンドウ内に自由に配置できます。
2. トップ: 50%; Left: 50%;: これらのプロパティは、要素の上端と左端の位置をそれぞれウィンドウの高さと幅の 50% に設定します。デフォルトでは、要素はウィンドウの中央に垂直方向と水平方向に配置されます。
3. Transform:translate(-50%,-50%);: 変換プロパティは要素の位置を調整します。さらに、高さと幅の半分だけ移動します。この修正により、要素の中心点がウィンドウの中心と完全に一致するようになります。

これらの CSS プロパティを適切に設定すると、ウィンドウのサイズやサイズに関係なく、対象の要素がブラウザ ウィンドウ内の中心に常に配置されたままになります。その他の要因。

以上がサイズに関係なく、要素をブラウザ ウィンドウの中央に完全に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。