CSSを使用して「要素」を画面の中央に配置する方法は?

<div> を配置する方法CSS を使用した画面中央の要素

<div> の配置の一元化Web ページ上の要素では、画面の解像度に関係なく、慎重な CSS スタイル設定が必要です。目標は、上、下、左、右のすべての面で均等な間隔を確保することです。

方法 1: 固定寸法による絶対配置

事前定義された要素の場合幅と高さの場合、最も簡単な解決策は絶対位置指定です:

#divElement {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

• このメソッドは要素の位置を設定します画面の高さと幅の 50% まで拡大し、中央に配置します。
• 要素の高さと幅の半分の負のマージンにより、要素の位置が適切な量だけオフセットされ、すべての面で均等な間隔が確保されます。

例:

<div>

メソッド2: CSS Transform プロパティ

動的なサイズ設定を持つ要素の場合、CSS Transform プロパティを使用できます。

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

• このメソッドは要素に変換変換を適用します。水平方向と垂直方向の両方に、幅と高さの半分だけ移動します。
• 要素は、要素の 50% の位置に残ります。画面の高さと幅ですが、変換により正しくオフセットされます。

注:

• どちらの方法でも、要素が中央に配置され、ページのコンテンツと一緒にスクロールしません。
• これらの CSS との互換性を最適化するには、最新のブラウザを使用することをお勧めします。テクニック。