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

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

FlexBox を使って要素を縦並びかつ、中央揃えさせる方法を紹介します。
例は以下の通りです。開発者ツールから FlexBox で要素を縦に中央揃えさせていることも確認いただけます。

• box1
• box2
• box3

サンプルコード

HTML

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

今回の例はブロック要素に適用する例です。ul, li を使用していますが、div 等他のブロック要素でも可能です。

CSS

.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 は中央に要素配置します。

以上、FlexBoxで縦に中央揃えさせる方法をご紹介しました。