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

HTML&CSS

今回は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は次の通りです。

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

まとめ

Flexboxを使った中央揃えを紹介しました。

Webページを作るときは、中央揃えにするコードを書く機会が多いので、Flexboxは覚えておきたいテクニックの一つです。

Flexboxは他にも横並びのメニューを作る際などにも使用できますので、気になる方はFlexboxの活用方法を調べてみてください。

HTML&CSS初心者向け
スポンサー
フォローする
スポンサー
Public Constructor