今回は、CSSで要素を縦の中央揃えのやり方をまとめました。
実際のコーディングでも頻繁に出てくる部分ですのでしっかりと抑えおきましょう。
テキスト要素を縦の中央に配置する場合
line-height （1行のみの場合）
line-heightテキストが１行の場合の縦中央に配置します。
line-heightはテキストの行間を指定するプロパティです。
テキストを囲んでいる高さと同じ高さを指定することで上下中央となります。
See the Pen 上下中央 line-height by morikuma (@morikuma) on CodePen.
table + vertical-align （複数行の場合）
vertical-alignテキストが複数行の場合の縦中央に配置します。
親要素にtable、子要素にtable-cellを指定することにより、
テキスト部分をテーブル要素とします。
そしてvertical-alignで縦方向の位置を中央に指定します。
※vertical-alignはインライン要素、テーブル要素しか指定できません。
See the Pen Untitled by morikuma (@morikuma) on CodePen.
ブロック要素を縦の中央に配置する場合
flexbox
display: flex;
align-items: center;flexboxを使用します。
こちらは親のブロック要素に指定し、align-items:centerで子要素を上下中央にします。
See the Pen 上下中央 flex by morikuma (@morikuma) on CodePen.
grid
display: grid;
align-items: center;gridを使用します。
こちらもflexと同様です。
See the Pen 上下中央 grid by morikuma (@morikuma) on CodePen.
transform
top: 50%;
transform: translateY(-50%);
margin: auto;transformを用いて縦の中央に指定することができます。
topとtransformプロパティの指定は以下をイメージしてみると分かりやすいです。
top:50%で上辺を真ん中にして、transform: translateY(-50%);でブロックの半分を上に引き戻して縦中央に配置しています。
また上記のtopとtransformの部分を、top:0 bottom:0 に置き換えても同じ動きとなります。
See the Pen 上下中央 疑似要素 by morikuma (@morikuma) on CodePen.
まとめ
いかがでしたでしょうか。縦の中央揃えにも多数の指定の仕方があります。
実際のコーディングでも適切に使用できるようにしましょう。
【CSS】横の中央揃えのやり方についてはこちら
【CSS】上下左右中央揃えのやり方についてはこちら