CSSで子要素の縦位置をセンタリングしてみます。
その1 position:absolute をつかう。
己を position: absolute に、親要素を position: relative （もしくは absolute、fixed）にして、自らのtopを50%、margin-topを己の高さの半分に設定すれば、なんということでしょう。縦位置のセンタリングのできあがりです。
必要な情報としては、己の高さのみなので非常にお手軽です。
その2 display:table-cell と vertical-align:middle をつかう。
親要素を display: table-cell、 vertical-align:middle に、さらにその親要素を display: table にすることによって、縦位置のセンタリングのできあがりです。
要素がひとつ増えてしまいますが、誰もなにも知らなくても手軽にセンタリングできます。
その3 display:inline-block と vertical-align:middle をつかう。
己を display:inline-block, vertical-align:middle に、親要素の line-heightを高さ一杯にすることによって、縦位置のセンタリングのできあがりです。
line-height が %で指定できないため、親要素の高さが決まっている必要があります。
個人的には1行のテキストの縦位置をセンタリングしたい時は「その3」を、複数行のテキストをセンタリングしたい時は「その2」を、それ以外のときは大体「その1」をつかっております。
CSSでいまどきのメニューボタンのアニメーションをつくりました。https://t.co/WRYnEfDkTi
— 君塚史高 (@ki_230) 2017年4月17日
ツイッターやってます！
