1. 垂直中央揃えとは何か

垂直中央揃えとは、要素を上下のちょうど真ん中に配置することです。たとえば、ボタンの中の文字、ヘッダーの中のロゴ、カード内のテキストなど、見た目を整えたい場面でよく使われます。

初心者の方がCSSでつまずきやすいポイントの一つが、この垂直中央揃えです。昔は複雑な設定が必要でしたが、フレックスボックスを使えば驚くほど簡単になります。

2. align-itemsの基本的な役割

align-itemsは、フレックスボックスで「上下の位置」をそろえるための設定です。英語のalignは「そろえる」、itemsは「中身」という意味があります。つまり、箱の中の要素の位置をそろえるための指定です。

centerを指定すると、親要素の高さの真ん中に子要素が配置されます。難しい計算は一切不要で、初心者でもすぐに使えるのが特徴です。

3. 垂直中央揃えをイメージで理解する

コップの中にビー玉を入れる様子を想像してください。何もしないと、ビー玉は下に落ちてしまいます。しかし、真ん中に固定すると、上下の中央にきれいに収まります。

フレックスボックスのalign-items centerは、この「ビー玉を真ん中に置く」役割をしてくれます。要素を自然に中央へ導いてくれる便利な仕組みです。

4. 垂直中央揃えの基本コード

ここでは、フレックスボックスを使って文字を上下中央に配置する例を紹介します。親要素に高さを持たせることがポイントです。


<style>
	.box {
	    display: flex;
	    align-items: center;
	    height: 150px;
	    border: 1px solid #ccc;
	    padding: 10px;
	}
</style>

<div class="box">
	<p>この文字は上下の真ん中に表示されます</p>
</div>

ブラウザ表示

align-items centerを指定するだけで、文字が上下中央に配置されているのがわかります。このシンプルさが、フレックスボックスの大きな魅力です。

5. よくある失敗と注意点

垂直中央揃えがうまくいかない原因の多くは、親要素に高さが設定されていないことです。高さがなければ、中央という基準が作れません。

また、align-itemsは必ずフレックスボックスと一緒に使います。 displayでフレックスボックスを指定していない場合、 align-itemsを書いても効果はありません。

6. 垂直中央揃えが活躍する場面

垂直中央揃えは、ボタン、ヘッダー、カードデザインなど、見た目の印象を大きく左右する場面で使われます。文字やアイコンが中央にあるだけで、デザインはぐっと整います。

CSSフレックスボックスとalign-items centerを覚えておくことで、初心者でもプロのようなレイアウトに近づけます。まずは基本の使い方をしっかり身につけていきましょう。

CSSフレックスボックスで垂直中央揃えを簡単に行う方法｜align-items center完全入門