要素を中央に配置

このレシピでは、あるボックスを別のボックスの中央に配置する方法がわかります。 フレックスボックスを使用する前は、水平方向と垂直方向の両方を中央に配置するのは困難でしたが、ボックス配置プロパティを使用できるようになり簡単になりました。

大きなボックスの中央に配置された要素

要件

項目を別のボックスの縦横の中央に配置する。

レシピ

行った選択

あるボックスを別のボックスの中央に配置するには、コンテナをフレックスコンテナにします。 次に、ブロック軸(交差軸)の中央に配置するには align-itemscenter に設定し、インライン軸(主軸)の中央に配置するには justify-contentcenter に設定します。

ここで使用されているボックス配置プロパティはブロックレイアウトにも適用されるように指定されているため、将来的には親をフレックスコンテナに変える必要なしに要素を中央に配置できるようになるかもしれません。 ただし、現在ブロックレイアウトでのボックス配置プロパティのサポートは制限されているため、現在フレックスボックスを使用して中央に配置するのがこれを達成するための最も堅牢な方法です。

ブラウザー実装状況

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

align-items

BCD tables only load in the browser

justify-content

BCD tables only load in the browser

MDN にある資料