CSS のみを使用して Div 要素を画面の中央に配置するにはどうすればよいですか?

を中央揃えCSS を使用した画面上の要素

Web レイアウトを作成する場合、多くの場合、要素を画面の中央に配置する必要があります。これは CSS を使用して実現でき、インライン スタイルや複雑な JavaScript ソリューションの必要がなくなります。

要素の幅と高さを固定する

1 つの直接的なアプローチは、固定要素を定義することです。

の幅と高さ。 element:

#divElement {
    width: 100px;
    height: 100px;
}

要素の配置

要素を正確な中心に配置するには、絶対配置を使用します:

#divElement {
    position: absolute;
}

中心座標の計算

を決定する画面の中心では、幅と高さの中点を見つける必要があります。これには、それらを 2 で割ることが含まれます。

top_margin = screen_height / 2;
left_margin = screen_width / 2;

要素のマージンの調整

要素の位置を調整するには、負のマージンを使用します。これにより、要素が元の位置から高さと幅の半分に移動し、画面の中央に配置されます。

#divElement {
    margin-top: -top_margin;
    margin-left: -left_margin;
}

完全な例

すべてをまとめると、次のようになります。完全な CSS コード:

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

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。