【CSS】display:flexで中央寄せする方法

「display: flex」は、CSSの「display」プロパティの1つで、要素をフレックスボックスに変換します。これにより、子要素を横方向や縦方向に並べることができます。

「display: flex」を使用して、子要素を中央寄せする方法には、主に以下の2つの方法があります。

1.「justify-content」プロパティを使用します。「justify-content」は、子要素を水平方向に寄せる際に使用します。「center」を指定することで、子要素を中央寄せすることができます。

.container {
  display: flex;
  justify-content: center; /* 水平方向に中央寄せ */
}

2.「align-items」プロパティを使用します。「align-items」は、子要素を縦方向に寄せる際に使用します。「center」を指定することで、子要素を中央寄せすることができます。

.container {
  display: flex;
  align-items: center; /* 縦方向に中央寄せ */
}

両方の属性を合わせることで水平中央寄せを行い、同時に縦中央寄せも実現できます。

.container {
  display: flex;
  justify-content: center; /* 水平方向に中央寄せ */
  align-items: center; /* 縦方向に中央寄せ */
}

このように、「display: flex」を使用して、子要素を中央寄せすることができます。