みかづきブログ その3

3ヶ月つづけてみました。

CSSで子要素の縦位置をセンタリングしよう。

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」をつかっております。






ツイッターやってます!