【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の詳細については以下のリンク先を参考にしてみてください。

【CSS】Flexboxの使い方｜縦横の配置・横幅サイズ・折返しなどを指定する方法

上記以外に、Flexboxを利用した上下左右の中央揃えの例は、以下のリンク先を参考にしてみてください。

【CSS】fixedでの中央揃えの例｜固定した要素内を上下左右の中央揃え

【CSS】上下・左右の余白サイズを指定した中央揃えの例｜calc関数

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

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

ベンダープレフィックスを自動で追加する方法｜autoprefixer・postcss-cli【npm】