CSSで垂直方向真ん中にテキストを配置したい
垂直方向に真ん中にテキストを配置したい場合は良くある
結構あるんですよね。 ある範囲で、垂直方向真ん中にテキストを配置したいっていうこと。
その度に、 vertical-align が思い浮かぶんですが、毎回結局これを使わずに済ませることが多いように思います。
横に並んだブロック要素内のテキストが、文字やアイコンの大きさが違うため、横に並んでくれない！ 並んでくれ〜！ ということも何度か経験しました。
というわけで、毎回なんとなく悩んでいるので、今後の同様のパターンが起きた時に学びを重ねて追記することを念頭に置きつつ、今わかっていることをまとめておこうと思います。
議題としては、大きく２つ。
vertical-alignってどんな時は有効なんだっけ？ 実際「垂直真ん中にテキストを配置したい」場合に使えるの？？- それ以外で有効な「垂直真ん中にテキストを配置する」方法は何がある？？
vertical-alignはそもそもtable-cellとinline要素にしか効かない
よく忘れるのでメモしてしっかり覚えたいと思うが、 vertical-align が使えるのは、table-cellか、inline要素である。
つまり、block要素などに使いたい場合は、 display: table-cell か、 display:inline-block を指定する必要がある。
vertical-alignで指定できるのは
- baseline
- text-bottom
- middle
- top
などがあるが、それぞれの要素が何かということによっても、結果の描写が異なるため、vertical-alignは結構使いにくい・・・。 思い通りにいかないことが多いです。
ということで、垂直方向で真ん中にテキストを配置したい場合に、よく使う順で方法を記載しておきます。
方法① 親要素のheightと子要素のline-heightを同じにする（textが一行の場合のみ有効）
これが一番簡単で、単純でわかりやすく、予想外の自体も起こりにくいです。
親要素のheightを設定し、子要素の line-height を同じ高さにします。
これで配置などを考えずとも、真ん中になってくれます。
ただし欠点があり、テキストが一行でないとうまく行きません。
方法② display: table-cell にしてvertical-align
これは vertial-align を使うケースです。
vertical-align を使う場合、一番予想外なことを起こさずにできるのは、 display: table-cell を指定しておいた時です。
要素をテーブルセルとみなすので、これであれば、一応複数行でも真ん中になってくれます。
ただ、やはり（原因が明確に理解できていないですが） vertical-align にありがちで、思うような配置になってくれない（効いてくれない）ことが起こりがちです。
方法③ 子要素にposition: absoluteを設定し、topを親要素の50%、margin-topを子要素の半分に設定
無理矢理ではありますが、こちらも変なことは起こりにくいやり方。
- 親要素に、
position: relative、子要素（テキスト）にposition: absoluteをつけます - 子要素の
topに、（親要素のheightの半分）から （子要素のheightの半分）を引いたものを設定します
もしくは
- 子要素の
topに、親要素のheightの半分を設定し、margin-topに、ー（子要素のheightの半分）を設定します。
良い方法があったら追記します。
