画像や要素を親要素のど真ん中、つまり上下左右の中央に配置したいときってあると思います。そんなときに使える便利なスタイルシートを２つご紹介します。
方法１：position: absolute; ＋ margin: auto;
結論から見てみましょう。今回は画像を中央寄せしてみました。
ボタンで表示を切り替えてご覧ください。
See the Pen img_center01 by kenichi (@ken81) on CodePen.
CSS
img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
理屈は抜きにして、とりあえず要素を中央に配置したいという方は上記のプロパティと値をそのまま使えば中央配置が可能です。
この方法が上下左右に中央配置される理由
これはそういうものだと思ってもらうしかない感じではありますが、ヨコに関してもタテに関しても次の条件がそろったとき中央に配置される仕組みになっています。
- position: absolute;である。
- top, bottom, right, leftの値がauto（初期値）でない。
- marginが左右上下にautoである。
top, bottom, right, leftの値が「0」なのは初期値「auto」を解除させる目的です。画像が中央に配置された直接的な要因はmargin: auto;によって上下左右のmarginを「auto」にしたことにあると覚えておきましょう。
方法２：display: flex;
２つ目の方法は中央寄せしたい要素の親要素にdisplay: flex;と一連のプロパティを指定する方法です。
See the Pen img_center02 by kenichi (@ken81) on CodePen.
CSS
.wrap {
height: 183px;
display: flex;
justify-content: center;
align-items: center;
}
セレクタがimgではなくてその親要素になっている点にご注意ください。flexboxというのは親要素にdisplay: flex;を指定することで、子要素に対していろんな配置が指定できる便利なレイアウトモジュールです。こちらの方が感覚的に分かりやすいプロパティになっているのが分かると思います。
ただし、高さの指定がないと上下の中央寄せができませんので、heightの値はそれぞれ任意の値を入れましょう。もしかしたら、「flex」という値を初めて見たという方もいるかもしれないので、良かったら下記の記事も参考にしてみてください。flexboxはすごい便利ですよ。
