ここでは、テキストやボックスを縦に中央寄せする代表的な３つの方法をご紹介します。
縦の中央が効かなくて困っている方はぜひ参考にしてください。
１．「height＝line-height」で１行を真ん中に
これは見出しなどテキストが１行であることが確定している場合に使う方法です。
ボタンで表示を切り替えてご覧ください。
See the Pen middle01 by ken (@ken81) on CodePen.
h1{
height:100px;
line-height:100px;
}
こんな形で要素の高さと行間を同じ値にしてあげるとテキストが中央に寄ります。これは必ず１行で収まる場合のみですので、スマホ表示などでテキストが折り返してしまう場合は次の方法を試してください。
複数行あるテキストを縦に中央寄せ
テキストが複数行になる場合は、display:table-cell;とvertical-align:middle;を一緒に指定します。
See the Pen middle02 by ken (@ken81) on CodePen.
.box{
display:table-cell;
vertical-align: middle;
}
セレクタとして指定するのは、中央に寄せたい要素の親要素になります。vertical-align:middle;を使った縦の中央寄せは、ブロック要素には効きませんのでdisplay:table-cell;を指定する必要があります。vertical-alignはtext-alignに似ているので、値をcenterにしてしまいそうになりますが、middleである点に気をつけましょう。
Flexboxを使った中央寄せ
See the Pen middle03 by ken (@ken81) on CodePen.
.box{
display:flex;
align-items:center;
}
flexはCSS3から導入された方法です。先ほどのvertical-align: middle;のやり方と似ていて手間も変わらないように見えますが、こちらの方が応用がかなり効くのでこちらを覚えていただくのがベストだと思います。
例えば、左右にも中央寄せしたい場合は、justify-content:center;を追加するだけでできます。
See the Pen middle04 by ken (@ken81) on CodePen.
Flexboxについては、下記の記事でも詳しくお話していますので、良かったら参考にしてみてください。
