要素を縦(上下)中央に配置するCSSの指定方法。たった3行、これだけ覚えておこう。


CSSによる縦横中央への要素の配置

慣れればどうって事は無いんですが、要素の配置で悩むことって多いですよね。
ちょうど真ん中に置くというようなシンプルな配置には、難しい計算をする必要はありません。
左右中央の配置は頻繁に必要になるので、すぐに思いつくと思いますが、縦中央の配置というのは重要度は高いけれど頻繁には出てこないので、いざ出てきたときに迷ったりします。
今回は、たった3行のCSSでこれだけ覚えればたいていの縦横中央配置が可能になるコードを紹介します。

縦中央の配置はdisplay:flex;を使う

縦中央の配置はdisplay:flex;を使います。
display:flex;
の配置には、縦横への配置に関する属性がありますので、
それらを使いましょう。
参考:CSSで要素の配置に欠かせないdisplay;flexの使い方

/* 縦中央に配置 */
.outer{
  display: flex;
  justify-content: center;
  align-items: center;
}

See the Pen
Untitled
by Yoshimune (@hachidaime)
on CodePen.

たった3行、縦中央だけでしたらたった2行です。
状況によっては他にも方法はありますが、これが1番簡単で柔軟性があるでしょう。
flexを使ってはいけない場面もなかなかないと思うので、今はこれさえ覚えておけば充分だと思います。

事前準備で、幅と高さを指定していますが、もちろん高さの指定されていない要素は中央というものが存在しません。
そのため、外側の要素に高さを指定してあらかじめ箱を作ったうえで中央に配置しています。

普段使わない指定は、いざ使うときにどうすればいいんだろうと悩むこともありますが、普段使わないので慣れていないだけで、設定自体は意外と簡単なことも多いです。
今回の縦中央の配置も、今後も必要になること多いと思うので、ぜひ知っておいてください。

[RelService] [Service]