こんにちは！トランソニックソフトウェア亀井です。

今回はCSSで要素を上下左右で中央寄せする方法をご紹介します。

WEBページ制作を始めたばかりの方や、CSSを勉強中の方は、やり方に迷っている方も多いと思います。
方法自体はページのレイアウトや中央寄せしたい要素の種類などの条件によっていくつか存在します。

例えば…

●親ブロックに高さが指定されているなら
― vertical-align:middle; を使用したり
※ブロックをテーブルセルかインラインの要素にする必要があります
― line-heightを親ブロックの高さと同じ値で設定する
※1行の文章の場合に使えます

●中央寄せしたい要素に横幅高さが指定されている場合は
― ブロックにposition:absolute;を使用してmargin:auto;を設定する

などまだいくつも存在します。

今回紹介するものは、レスポンシブ対応などで親ブロックの横幅や縦幅が可変する場合に使えるものです。
また上で紹介したline-heightと違い複数行の文章でも利用することができます。
背景画像を設定したブロックの上下左右の中央にキャッチフレーズを置きたい時などに利用できます。

まず中央寄せしたい親ブロックにdisplay:flex;（フレックスボックス）を指定します。
フレックスボックスとは指定したブロックの中身が並列になるスタイルです。

●HTML
<div id=”example”>
<p>上下左右中央寄せしたい要素</p>
</div>

●CSS
#example{
height: 任意で設定;
width: 任意で設定;
display: flex;　/*要素をフレックスボックスに*/
align-items: center;　/*フレックスボックスの中のアイテムを上下中央に*/
justify-content: center;　/*フレックスボックスの中のアイテムを左右中央に*/
}

たったこれだけです！
中身の高さ、横幅は成り行きで設定され、とてもスッキリしたコードで簡単に実装できます。
※IE9以下には対応していないようなので注意してください。

同じことをするにもさまざまな方法が存在するCSSは奥が深いですね。
是非、用途にあっていれば使ってみてください！