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

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

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

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

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

上記のCSSでは、親と子からなるボックスの親要素に対して次のプロパティを指定し、親要素内のレイアウトを上下左右の中央揃えにしています。

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

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

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

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

コメント投稿またはTwitterで返信

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

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