コピペで使える！CSSで複数行のテキストを縦中央に配置するサンプルコード
たーさん今回はCSSを使って指定のHTML要素を縦中央に配置するサンプルコードについてご紹介します。
Webページを制作する上で縦中央揃えというのはなかなか厄介なもので、サンプルコードを探して気づくとだいぶ時間を使っていた・・・なんてこともしばしば。
実際筆者もこの部分は毎回検索して調べたりしていたので今回備忘録としてサンプルコードを残すことにしました。
縦中央揃えは揃える対象が1行の文字列のときはline-heightで対応できるのですが、これが2行の文字列となるとうまくいかなくなってしまいます。line-heightは行間の指定のため行間も変わってしまうからです。
ですので、複数行のテキストを縦中央に揃えるためにはテキストを囲むブロック要素そのものを中央に揃えなければなりません。
では早速この場合のサンプルコードをご紹介します。
HTML
<div class="v-wrapper">
<h3>コピペで使える！<br />CSSで複数行のテキストを縦中央に配置するサンプルコード</h3>
</div>
CSS
.v-wrapper {
display:flex;
justify-content:center;
align-items:center;
height:100px;
}
ブロック要素を縦中央に揃えるためには中央を決めるベースとなる親要素（今回で言うとv-wrapper）が必要になります。
その上で親要素にフレックスを指定してあげると、その子要素（今回で言うとh3）が縦中央に配置されることになります。
一度親要素で囲うテクニックは見出しデザインの際に割と使うので覚えておいて頂くとよいかと思います。
投稿者プロフィール
- 代表者
-
東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。
その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。
開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。
現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。
見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。
