【HTML&CSS】Flexboxを使って要素を上下左右に中央揃えにする方法

今回はFlexboxを使って、要素を上下や左右に中央揃えする方法を紹介します。

まずFlexboxを使用するためには、要素に対して”display: flex”を設定する必要があります。

そして、調整したい位置によって”display: flex”を追加した要素に、更に別の属性を設定することになります。

それでは、Flexboxで上下・左右・上下左右で要素を中央揃えにするには、どのようにすれば良いか、下記の例を使って確認してみましょう。

上下中央揃えにする
左右中央揃えにする
上下左右の中央揃えにする
まとめ

上下中央揃えにする

<div class="box">
  <div class="height-center">
    <p>上下に中央揃え</p>
  </div>
</div>

.box {
  background: #ffed4a;
  margin-bottom: 2rem;
  height: 100px;
  width: 600px;
}

.height-center {
  height: 100px;
  width: 600px;
  display: flex;
  align-items: center;
}

See the Pen 【Flexbox】上下に中央揃え by aiiro (@aiiro29) on CodePen.

“.height-center”を使って、上下中央に揃える例です。

“.height-center”に設定しているFlexboxは次の通りです。

中央揃えにしたい要素は”pタグ”の要素なので、”display: flex”を適用。
上下中央に揃えるために、”align-items: center”を設定。

左右中央揃えにする

<div class="box">
  <div class="width-center">
    <p>左右に中央揃え</p>
  </div>
</div>

.box {
  background: #ffed4a;
  margin-bottom: 2rem;
  height: 100px;
  width: 600px;
}

.width-center {
  height: 100px;
  width: 600px;
  display: flex;
  justify-content: center;
}

See the Pen 【Flexbox】左右に中央揃え by aiiro (@aiiro29) on CodePen.

“.width-center”を使って、左右中央に揃える例です。

“.width-center”に設定しているFlexboxは次の通りです。

中央揃えにしたい要素は”pタグ”の要素なので、”display: flex”を適用。
左右中央に揃えるために、”justify-content: center”を設定。

上下左右の中央揃えにする

<div class="box">
  <div class="both-center">
    <p>上下中央揃え</p>
  </div>
</div>

.box {
  background: #ffed4a;
  margin-bottom: 2rem;
  height: 100px;
  width: 600px;
}

.both-center {
  height: 100px;
  width: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

See the Pen 【Flexbox】上下左右に中央揃え by aiiro (@aiiro29) on CodePen.

“.both-center”を使って、上下左右中央に揃える例です。

“.both-center”に設定しているFlexboxは次の通りです。