コピペで使える！CSSで複数行のテキストを縦中央に配置するサンプルコード

tasan

今回はCSSを使って指定のHTML要素を縦中央に配置するサンプルコードについてご紹介します。

Webページを制作する上で縦中央揃えというのはなかなか厄介なもので、サンプルコードを探して気づくとだいぶ時間を使っていた・・・なんてこともしばしば。

実際筆者もこの部分は毎回検索して調べたりしていたので今回備忘録としてサンプルコードを残すことにしました。

縦中央揃えは揃える対象が1行の文字列のときはline-heightで対応できるのですが、これが2行の文字列となるとうまくいかなくなってしまいます。line-heightは行間の指定のため行間も変わってしまうからです。

ですので、複数行のテキストを縦中央に揃えるためにはテキストを囲むブロック要素そのものを中央に揃えなければなりません。

では早速この場合のサンプルコードをご紹介します。

HTML


<div class="v-wrapper">
  <h3>コピペで使える！<br />CSSで複数行のテキストを縦中央に配置するサンプルコード</h3>
</div>


.v-wrapper {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100px;
}

ブロック要素を縦中央に揃えるためには中央を決めるベースとなる親要素（今回で言うとv-wrapper）が必要になります。

その上で親要素にフレックスを指定してあげると、その子要素（今回で言うとh3）が縦中央に配置されることになります。

一度親要素で囲うテクニックは見出しデザインの際に割と使うので覚えておいて頂くとよいかと思います。

Follow me!