FlexBoxで縦に中央揃えさせる方法

FlexBox を使って要素を縦並びかつ、中央揃えさせる方法

<ul class="flexBox">
  <li>box1</li>
  <li>box2</li>
  <li>box3</li>
</ul>

.flexBox {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flexBox li {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #a9a9a9;
}

display: flex は縦に中央揃えしたい要素の親要素に適用します。display: flex を適用した要素の子要素が、自由に操作できるフレックスアイテムとなるためです。

そして今回の目的である、要素を「縦」にしているのが flex-direction: column 、「中央揃え」にしているのが align-items: center です。

flex-direction は要素がレイアウトされる方向を設定できます。今回設定した column は上から下に要素を設置します。

align-items は要素がレイアウトされる位置を設定できます。今回設定した center は中央に要素配置します。