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

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

Web 要素をブラウザ ウィンドウの中央に正確に配置することが一般的な要件となる場合があります。ブラウザ ウィンドウのサイズやその他の要因に関係なく。これは、CSS の位​​置決めプロパティを使用して実現できます。

解決策:

ブラウザ ウィンドウ内で要素を中央に配置するには、次のメソッドを使用します。 CSS:

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

説明:

• 位置:絶対; 通常のフローから要素を削除し、配置できるようにします。正確に。
• トップ: 50%;要素の上端をブラウザ ウィンドウの上端から 50% の位置に配置します。
• Left: 50%; 要素の左端をブラウザ ウィンドウの左端から 50% の位置に配置します。 .
• Transform: translation(-50%,-50%); 要素の位置を調整すると、水平方向と垂直方向の両方で効果的に 50% オフセットされます。これにより、要素が元の領域内の中央に配置されます。

これらのプロパティを組み合わせることで、サイズやレイアウトに関係なく、ブラウザ ウィンドウ内の HTML 要素を正確に中央に配置できます。

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