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

CSS テクニックを使用した要素の垂直方向の中央揃え

div 内の要素の垂直方向の中央揃えは、さまざまな CSS メソッドを使用して実現できます。以下に 2 つの一般的なアプローチを示します。

Flexbox メソッド

Flexbox は、アイテムの柔軟な配置を可能にする多用途のレイアウト システムを提供します。 Flexbox を使用して要素を垂直方向の中央に配置するには、次の手順に従います。

1. display: flex を使用して親コンテナをフレックス表示に設定します。
2. 要素をスタックする列のフレックス方向を指定します。
3. justify-content: center を使用して項目を垂直に配置します。

の場合たとえば、Flexbox を使用した CSS スニペットは次のとおりです:

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

テーブルと位置決めメソッド

このメソッドはテーブル表示と位置決めを利用します:

1. ボディをdisplay: tableに設定して、テーブルのようなものを確立します
2. 親コンテナを表示するように設定します: table-cell とvertical-align: middle でコンテンツを垂直に配置します。
3. margin: 0 auto を使用して要素を中央揃えにします。

このメソッドの CSS コードは次のとおりです:

body {
  display: table;
}

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

.box {
  margin: 0 auto;
}

Which選択する方法は?

一般的には、そのシンプルさ、効率性、幅広いレイアウト オプションにより、Flexbox が好まれます。ただし、古いブラウザのサポートが懸念される場合は、テーブルと配置方法を採用できます。

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