CSSで要素を中央に配置する

プログラミングの勉強日記

2020年6月30日　Progate Lv.148
ポートフォリオ作成中
縦横方向に中央揃えにする。

目標物

　下の写真のように要素を真ん中に配置したい。横方向で真ん中にするためにはtext-align: center;の方法があるが、今回は親要素に対してど真ん中に配置する。

コード

　親要素にdisplay:flexとjustify-content: center、align-items: centerを追加する。

align-itemsプロパティ：フレックスアイテムの交差軸方向のアイテムの配置を制御する。
justify-contentプロパティ：フレックスアイテムの主軸の方向の揃え位置を指定する。

HTMLファイル

<div class="parent">
  <div class="children">
    <!-- コード -->
  </div>
</div>

CSSファイル

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}