【超初心者向け！】cssで要素を中央揃えする方法

こんにちは！12月に入社したコーダーのだいちゃんです。

今回は超初心者向け！cssでの中央揃えをする方法を紹介していきます。

1 左右中央揃え

まずは左右に中央揃えする方法です。

インライン要素 text-align:center;

インライン要素ではtext-align:centerを使うことで簡単に中央揃えすることが可能です。中央揃えしたい要素の親要素に指定しましょう。

See the Pen eYBvJxg by daisuke nakajima (@daichan08) on CodePen.

ブロック要素 margin:0 auto;

ブロック要素ではmargin:0 autoを使います。ただし使用するには同じ要素にwidthの指定が必須です。

See the Pen poNeyRe by daisuke nakajima (@daichan08) on CodePen.

2 上下左右中央揃え

続いて上下左右に中央揃えする方法です。

line-height + text-align:center;

親要素の高さが決まっているインライン要素ではline-heightを使用して上下左右に中央揃えすることが可能です。この時の指定は高さと同じにする必要があります。

See the Pen zYoZqLL by daisuke nakajima (@daichan08) on CodePen.

position:absolute; + margin:0 auto;

ブロック要素でpositionプロパティを使用すると親要素の幅、高さに対して上下左右に中央揃えすることが可能です。

See the Pen zYoZqem by daisuke nakajima (@daichan08) on CodePen.

transform

transformプロパティを使うことでも上下左右の中央揃えが可能です。この方法はインライン要素でもブロック要素でも使えます。

See the Pen GRNWqKq by daisuke nakajima (@daichan08) on CodePen.

display:flex;

display:flex;を使うことでも中央揃えが可能です。しかしFlexboxはIE10までのブラウザには非対応でIE11でもバグが確認されているので使用時には注意が必要ですです。

See the Pen NWbprPv by daisuke nakajima (@daichan08) on CodePen.

以上、様々な中央揃えの方法を紹介しました。 基本的な技術だと思いますが意外と思った通りにいかなくて困ることがありますよね。 状況に合わせて様々な方法が選べると思いますので、何パターンかは完全に覚えてしまうと便利だと思います。