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

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

目的が、HTML 要素をブラウザ ウィンドウの範囲内のちょうど中央に配置することである場合、その寸法を無視して、ブラウザ ツールバーレイアウトや画面解像度を考慮するには、特定のアプローチが必要です。

解決策には、CSS の位​​置: 絶対プロパティを使用することが含まれます。これにより、要素が通常のドキュメント フローから切り離され、正確な座標に配置できるようになります。さらに、上と左を 50% に設定すると、ウィンドウ内の垂直方向と水平方向の中間点に要素が配置されます。

この初期位置から要素をオフセットして視覚的な中心に戻すには、transform プロパティを使用する必要があります。変換(-50%、-50%)。これにより、アンカー ポイント (上と左) が調整された後でも要素が中央に維持されるようになります。

目的の効果を実現するための対応する CSS コードは次のとおりです。

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

実装することによってこのコードにより、外部要因に関係なく、HTML 要素をブラウザ ウィンドウの中央に正確に配置できます。

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