ブロック要素を中央寄せしたい場合、色々な方法があると思います。

有名なやり方だと margin: 0 auto; を指定するのが一般的かもしれないですね。

でも実はこの方法、垂直方向の中央寄せには使えません。水平方向にだけ有効なテクニックなので使える場面が限られてきてしまいます。

ここではブロック要素を水平・垂直どちらも中央寄せできる一番簡単な方法についてまとめました。困った時はこれを使っとけばOKというくらい万能な方法です。

ブロック要素の中央寄せのやり方＆コード例

では早速その方法について紹介していきます。

具体的なコード例を使って説明するなら次の通りです。

まず次のような親要素と子要素を作成

親要素には parent  、子要素には child  というクラス名を付けています。見たまんまです。

この段階では子要素は親要素の左上に位置しているので当然中央寄せされてません。つまり分かりやすくイメージ化すると次のような感じ

デフォルトだとこういう左寄せ＆上寄せの配置になります。

この子要素を親要素に対して中央寄せするのに必要なCSSコードは次の通り

まずコードで大事なのは親要素に position: relative;  を、子要素には positon: absolute;  を指定していること。こうすることで子要素を親要素の中で好きな位置に移動できるようになります。

そして子要素に left: 50%; top:50%;  と指定することで親要素の半分の幅・高さに子要素を移動

この時、移動は子の左上座標を中心に行われるので親の中心に子の左上座標がきてしまいます。なので子要素自体はまだ中央寄せになっていません。

なので  transform: translateX(-50%) translateY(-50%);  を適用して子要素の中心座標が親の中心に来るように調整しています。

このCSSでやっていることを大まかに説明すると上のような感じですね。

ちなみにCSSを適用した後の親要素と子要素の位置関係のイメージは次の図の通り

こういう風にピッタリと親の中に子が中央寄せされるようになります。

親要素と子要素だけに依存するので、結構どんな場合でも使える汎用的なテクニックです。

この方法の注意点 : ベンダープレフィックスについて

今紹介した方法を使う場合は１つだけ注意点があります。

それは古いブラウザの場合は transformプロパティ にベンダープレフィックスが必要ということ

各ブラウザでのtransformプロパティの対応状況は次で確認できます。

caniuse.com

 

12920 Pockets

Can I use... Support tables for HTML5, CSS3, etc

https://caniuse.com/#feat=transforms2d

ほとんどの最新ブラウザなら対応しているものの、IE や FIreFox などの一部バージョンでは未対応があります。また iOS 8.0 以下 や Android 4.4.x系 などのスマホ向けブラウザでも未対応があるようです。

もしそういうブラウザにも対応させるなら -webkit-transform  のベンダープレフィックスを使いましょう。

先ほどの中央寄せのCSSコードだったら次のように書き換えればOKです。

もしかしたら古いブラウザへの対応が必要になる場面もあるかもしれないので、一応紹介しました。最新・主要ブラウザに対応させるだけならベンダープレフィックスは別にいりません。

ここまでのまとめ

ブロック要素の中央寄せの要点をまとめると次の通り

• 親には relative 、子にはabsolute
  必ず親要素に position: relative;  、子要素には position: absolute;  を指定する必要あり。こうすることで子を親の中で自由に動かせるようになる
• 子の左上座標を親の中心に移動させる
  次に子要素に対して left: 50%; top: 50%;  のCSSを適用すれば子の左上座標が中心に来る。
• 子の中央座標を親の中心に移動させる
  最後に子要素に対して transform: translateX(-50%) translateY(-50%);  を適用してあげれば親の中心に子の中心が来て中央寄せ完了！

こういうテクニックを知っておくと中央寄せで迷うことが少なくなるはず。僕自身もとりあえず中央寄せしたい時はこれを使うことが多い気がします。

以上、ブロック要素を中央寄せする一番簡単なやり方についてでした。