【CSS】flexboxを使用して要素を中央に揃える方法

flexboxを使用して要素を中央に揃える方法です。

水平および垂直方向の中央揃え

.container {
  display: flex;
  justify-content: center; /* 水平方向に中央揃え */
  align-items: center; /* 垂直方向に中央揃え */
}

justify-content: center;を使用して水平方向に、align-items: center;を使用して垂直方向に要素を中央に揃えます。

単一の要素の中央揃え

.container {
  display: flex;
}

.child {
  align-self: center; /* 垂直方向に中央揃え */
  justify-self: center; /* 水平方向に中央揃え */
}

子要素が1つだけの場合、align-selfおよびjustify-selfプロパティを使用して中央に揃えることもできます。

まとめ

flexboxを使用すると、要素を中央に揃える作業が非常に効率的になります。これは、Webデザインにおいてレスポンシブなレイアウトを構築する際に特に重要です。柔軟性とシンプルな構文を備えたflexboxを上手に活用して、美しく中央揃えされた要素を実現しましょう。