ズバリこれを覚えれば解決。CSSで要素を縦の真ん中に持ってくる方法

「レイアウトを組んでいて要素が真ん中に来ない！！」

っていうそこのあなた！
わかりますよー！僕も昔結構苦労しました・・・

それこそmarginで上からpx数変えてみたり…positionで%をいじって調整してみたり…
top50%にしてもなんかずれてる！ってなりますよね。

しかもリキッドする場合や高さが変わる場面でズレるので対応できないじゃないですか。

今回はそんなレイアウトで悩むあなたへ一つの解答を贈りたいと思います。

すごい大げさなタイトルになっていますが、やり方自体は僕があらためて発見したというものではなくオーソドックスなものになっています。

しかし初学者だとその発想がでなかったり、記述自体はみたことがあって真ん中に来ること自体は知っていてもなんでだかわからなかったりします。
なのでそのへんも軽く解説していきます。

なにはともあれ、まずは解答です。いろんなやり方がありますが現在一番これがスマートかと思います。

縦方向の中心

.base{
	position: relative;//親要素に必須
}

.child{//実際に真ん中にもってきたい要素に指定
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

基本的に必要なのはこれだけです。

上に色やサイズ等を仮でつけて表示するとこうなります。
キチンと中心に来ているのがわかると思います。

参考pen

See the Pen 縦方向の中心へ by aquacastle (@aquacastle) on CodePen.

真ん中へ持ってくる手段としては上記で基本的にはOKなのですが、そもそもなんでなんだ？って思うかもしれません。

「TOP50％で縦方向真ん中っていう指定じゃないの？」
「なんで−50％してるの？」

とかですね。ここらへんを少し話していきます。

まず「position: absolute;」ですが、この指定を行った要素はHTMLの物理法則から外れて独自のはぐれものになります。
そして基準となっている親要素（直近のpositionが指定されている先祖要素）からtopやleftで指定した分移動させることができます。

そしてtop: 50%;はしっかり真ん中へもってくるための記述なのですが、ここで落とし穴があります。
それは基準が「要素の左上」に設定されているためです。

このおかげで要素の左上を高さ50%ににもってこようとするので、当然要素はその下に垂れ下がる形となり、見た目には下にずれた形になります。

50％だけを指定した状態。左上を中心としているため、下に垂れ下がる形でズレてしまう。

数値を変えて微調整に関しては、場合によっては行いますが基本的にはリキッドしたり、大きさが変化するような場面では不適切です。
必ずズレてしまうからです。

そこでこのtransform: translateY(-50%);なのですが、こいつはなんぞやという話。

一言で言ってしまえば各種変形をつかさどるプロパティなのですが、これのtranslateY();を使うことによって縦方向への移動ができます。

topと何が違うの？って思うかもしれませんが、このプロパティは指定した要素の大きさを基準にします。
つまり真ん中にもってきたい要素の高さが200pxで、10％移動させるとすればその数値は20pxとなります。

これを利用します。
つまり端的に言えば−50％を指定することでちょうど要素の半分（50％）を上にもっていっているわけです。

上記を踏まえて、考え方の手順はこうです。
まずtop50％で親を基準に50％分の指定をかけます。

そしてこのままだとズレてしまうのでtransfromの出番です。

translateYで−50％をかけることで「要素の半分の数値分」上へ動かします。

中心にもってこれた！

まとめ

うまく利用して思いのままのレイアウトを組んでみて下さい！