【CSS】上下・左右の中央揃えを簡単に実装する方法|Flexboxの利用例

今回はCSSのFlexbox(フレックスボックス)のレイアウトを利用し、簡単にボックス内の要素を上下・左右の中央揃えにする方法となります。

【CSS】上下・左右の中央揃えにする方法|Flexboxの利用例

以下はFlexboxを利用しボックス内の要素を上下・左右の中央揃えにする例となります。

例は、親と子からなるボックスと、階層を持たないボックスの2種類となり、それらのボックス内のコンテンツを上下・左右の中央揃えとしています。

See the Pen CSS Horizontal Align Center & Vertical Align Middle by yic666kr (@yic666kr) on CodePen.

上記例のCSSでは、次の3つのプロパティをボックスに指定することにより、そのボックス内直下の要素またはテキストを、ボックスに対して上下・左右の中央揃えにしています。

  • display: flex;(Flexboxを利用)
  • justify-content: center;(左右を中央揃え)
  • align-items: center;(上下を中央揃え)

CSSのFlexboxの詳細については以下のリンク先を参考にしてみてください。

ベンダープレフィックスを指定する場合

Flexboxに関するベンダープレフィックスを指定する場合、PostCSSが便利です。詳しくは以下のリンク先を参考にしてみてください。

コメント投稿コメント投稿欄を開く

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。