CSS を使用して要素をブラウザ ウィンドウの中央に完全に配置するにはどうすればよいですか?

ブラウザ ウィンドウ内で要素を中央に配置する

Web 開発では、多くの場合、ユーザーのブラウザ ウィンドウ内で要素を正確に配置することが望まれます。さまざまなブラウザ ウィンドウ サイズ、画面解像度、ツールバーに関係なく、要素を垂直方向と水平方向に中央に配置するのは難しい場合があります。

解決策: 絶対配置を利用する

解決策は次のとおりです。絶対位置決めを採用し、通常のドキュメント フローから要素を削除し、正確なピクセル操作を可能にします。 CSS でこれを実現する方法は次のとおりです。

div#wrapper {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

説明:

• position:Absolute: 要素を外部に移動します。ドキュメント フローを実現し、絶対配置を有効にします。
• 上: 50%: 要素の垂直位置をブラウザ ウィンドウの正確な中心に設定します。
• left: 50%: 要素の水平位置をブラウザ ウィンドウの中心に設定します。ブラウザウィンドウ。
• transform:translate(-50%,-50%): 調整します要素の上端と左端の座標を基準とした要素の位置。これにより、要素がその中心点の周囲に配置され、ブラウザ ウィンドウ内で完全に中央に配置されるようになります。

このコードを実装すると、

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