アイテムを中央揃えするには
このガイドでは、アイテムを他の要素の中で、水平方向と垂直方向の両方にセンタリングする方法について説明します。
ボックスの中央揃え
CSS を使用して、あるボックスを別のボックスの中に配置するには、親コンテナーで CSS ボックス配置プロパティを使用する必要があります。これらの配置プロパティは、ブロックやインラインレイアウトにおいてはブラウザーがまだ対応していないので、配置を使用する機能を有効にするためには、親コンテナーをフレックスまたはグリッドにする必要があります。
下記の例では、親コンテナーに display: flex を指定し、水平方向に配置するために justify-content を center に、垂直方向に配置するために align-items を center に設定しています。
メモ: このテクニックを使用して、1 つ以上の要素を別の要素の中に配置することができます。上の例では、justify-content と align-items の値を任意の有効な値に変更してみてください。