CSS のみを使用して Div 要素を画面の中央に配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-12-01 11:15:12

オリジナル

444 人が閲覧しました

How Can I Center a Div Element on the Screen Using Only CSS?

を中央揃え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 サイトの他の関連記事を参照してください。