Div 内の 2 つの要素を垂直方向の中央に配置するにはどうすればよいですか?

Div 内の 2 つの要素を垂直方向に中央揃えにする方法

div 内で 2 つの要素を垂直方向に揃えるには、次のいずれかの方法を使用できます。 :

1. CSS Flexbox メソッド

このメソッドでは、flexbox プロパティを使用して、要素のフレックス方向、配置、位置揃えを設定します。

CSS コード:

#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

このコードは、要素を垂直方向に積み重ね、水平方向と水平方向の両方で中央に配置するフレキシブル コンテナを作成します。垂直方向。

2. CSS テーブルと配置メソッド

このメソッドは、display: table プロパティとvertical-align: middle プロパティを使用して、div 内で要素を垂直方向に整列させます。

CSS コード:

body {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

#container {
    display: table-cell;
    vertical-align: middle;
}

このコードは body 要素をテーブルのように動作させ、#container div はテーブルのセルとして配置され、垂直方向に整列されます。

推奨事項

最新のアプローチ、柔軟性、使いやすさにより、テーブルや位置決め方法よりも Flexbox が一般的に推奨されます。

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