【CSS入門】flexで子要素を親要素に対して中央に配置させる

所有時間1分

今回はCSSのflexを使用して子要素を中央に配置させるコピペ用コードを紹介します。

目次

flexで中央に配置

See the Pen 子要素を中央に配置させる by Tsunagu (@Tsunagu) on CodePen.

  display: flex;
  justify-content: center;
  align-items: center;

親要素のclassまたはidに上記の指定をすれば子要素を中央に配置できます。

display: flex;

displayプロパティの値をflexにしておくことで「justify-content」「align-items」が使用できるようになります。

justify-content: center;

justify-contentプロパティの値をcenterにしておくことで子要素を水平線に対して中央に配置できます。

align-items: center;

align-itemsプロパティの値をcenterにしておくことで子要素を垂直線に対して中央に配置できます。

以上です。

URLをコピーする
URLをコピーしました!
目次
閉じる