テキストや画像を上下の中央に配置する方法(備忘録)

実は僕以外にも、テキストを左右の中央に設定するのはできるけど上下の中央に配置する方法で頭を悩ませる方が結構多いです。
なので2023年12月現在、僕なりに行き着いた上下の中央に配置する方法と、その仕組みを書き留めておきたいと思います。

御宅はいいからさっさと大事なところコピペさせろ！！

僕もそうだけど、結局欲しいのはソースなんだよね。わかります。
とりあえずコピペしてみて、それが動くかどうかですよね。
そんな僕を含めたお猿さんコーダーのために、さっさと書いちゃいます。

(もちろん、class="contents"のheight、background-colorは指定しなくてもいいですからね。)

何をしてるかというと…

ざっくり何しているかというと

1. class="contents"にposition:relative;で上下の基準を固定する。

2. spanにposition:absolute;でclass="contents"の中を自由に動かせるようにする。

3. top:50%;で上下の中央の高さに配置する。

4. transform: translateY(-50%); でspanの半分ぶんの高さをマイナスする。

transform: translateY(-50%);が大事！

3番目までは結構みんなできるんですよね。
でもそれだと狙った位置より少し下に配置されてしまいますよね。
なぜかというと、試しにtop:0;にしてもらえばわかると思うんですが、テキストの要素の上辺がピッタリ0ｐxの位置にあるかと思います。
つまりそこから50%の位置に置こうとすると、上辺が中央になる位置に配置されてしまうことになるんです。

行き過ぎたぶん、要素の高さの50%を引く！

要素の上辺が全体の50%の位置ということは、そこから要素の半分ぶんの高さ上に戻せばちょうど全体の真ん中の位置に配置できるという考えです。

この方法はテキストにはもちろんですが、画像とくにアイコンの配置で役に立つことが多いです。

たとえばCVボタンに矢印のアイコンを置きたい時などにもこの方法は有効かと思います。
この方法の何がいいかって、親要素(今回でいうclass="contents")がどの高さになっても常に50％の位置にいてくれるということ。

余談

vertical-align:middle;を使う方法ってのもあるかと思うんですが、個人的にはあまりいいと思っていないです。
その理由は第一にinline要素にしか効かせられないということ。
inlineってline(テキスト)の中(in)ってことで、僕のイメージでは例えば文章の大事な部分を太字にしたり、マーカー引いたりっていう、要所要所でつかうものかと思っています。
そんな文章中で、ある部分だけ高さを指定したままテキストを中央にするって自然じゃない感じがするんですよね。

もしくはvertical-align:middle;を指定したinline要素をそのままガチンと配置する方法もあるかと思うけど、それをやるならblock要素の方が圧倒的に配置しやすいと思うので、どちらかを活かすとどちらかが足を引っ張る結果になってしまうように思います。
なので、上記で紹介した方法がいいんじゃないかなって結論です。

まとめ

改めて一言で言えば、

親要素

position:relative;

子要素

position:absolute;
top:50;
transform: translateY(-50%);

以上！