[CSS] テキストを縦方向で中央揃えする4つの方法

要点解説
  • line-heightを使う
  • display:table-cellを使う
  • Flexboxを使う
  • position: absoluteを使う

01. line-heightを使用して縦方向中央揃えにする方法

テキストが一行だけでしたら、この方法が一番手軽で良いと思います。

See the Pen テキストを縦方向に中央揃えする_line-heihgt 【CSS】 by journalismhacks (@journalismhacks) on CodePen.

02. display:table-cellを使用して縦方向中央揃えにする方法

子要素には、display: table-cellとvertical-align: middleを指定します。

See the Pen テキストを縦方向に中央揃えする_display:table; vertical-align 【CSS】 by journalismhacks (@journalismhacks) on CodePen.

03. Flexboxを使用して縦方向中央揃えにする方法

See the Pen テキストを縦方向に中央揃えする_flexbox 【CSS】 by journalismhacks (@journalismhacks) on CodePen.

04. position: absoluteを使用して縦方向中央揃えにする方法

テキストの行数が決まっている場合のみ使える方法ですが、position: absoluteを使用することもできます。

See the Pen テキストを縦方向に中央揃えする_positon: absolute 【CSS】 by journalismhacks (@journalismhacks) on CodePen.

コメントを残す