line-height を使ったセンタリングは「テキストを縦方向に揃える」ための最もシンプルな方法
line-height は本来「行の高さ」を決めるプロパティですが、単一行のテキストを縦方向に中央揃えするためのテクニックとしても非常に強力です。
特に、ボタン・バッジ・タグ・小さなラベルなど、1行テキストの UI では最も軽量で安定した方法になります。
CSS と Tailwind CSS の両方で、初心者でも直感的に理解できるように丁寧に解説します。
line-height センタリングの基本仕組み
行の高さ（line-height）を要素の高さ（height）と同じにすると中央に見える
.box {
height: 40px;
line-height: 40px;
}
この状態では、テキストが行の中央に配置されるため、見た目として縦方向の中央揃えになります。
なぜ中央に見えるのか（深掘り）
line-height は「文字の上下にできる余白」を調整する仕組みです。
height と line-height が一致すると、上下の余白が均等になり、結果としてテキストが中央に見えます。
これは 単一行のテキスト限定 のテクニックであり、複数行では崩れます。
CSS での基本パターン
単一行テキストを中央揃えする
.button {
height: 40px;
line-height: 40px;
background: #3182ce;
color: white;
text-align: center;
border-radius: 6px;
}
HTML
<div class="button">送信</div>
テキストが縦方向に中央揃えされ、ボタンとして自然な見た目になります。
Tailwind CSS での line-height センタリング
Tailwind では line-height を leading-* で指定します。
<div class="h-10 leading-10 bg-blue-600 text-white text-center rounded">
送信
</div>
h-10（高さ）と leading-10（line-height）を一致させることで、
CSS と同じセンタリングが実現できます。
line-height センタリングが向いている UI
- ボタン
- タグ・バッジ
- 小さなラベル
- アイコン＋テキストの小要素
- ナビゲーションのメニュー項目
1行テキストで高さが固定されている UI に最適です。
line-height センタリングが向かない UI（深掘り）
- 複数行のテキスト
- 高さが可変の要素
- レスポンシブで高さが変わる要素
- アイコンとテキストを flex で揃えたい場合
こうしたケースでは flexbox の align-items: center を使う方が安定します。
実践例：タグ（バッジ）を中央揃えにする
CSS版
.tag {
height: 24px;
line-height: 24px;
padding: 0 12px;
background: #e2e8f0;
color: #4a5568;
border-radius: 12px;
display: inline-block;
}
HTML
<span class="tag">NEW</span>
Tailwind版
<span class="inline-block h-6 leading-6 px-3 bg-gray-200 text-gray-600 rounded-full">
NEW
</span>
タグの高さが揃い、テキストが中央に見えます。
実践例：ナビゲーションメニューの中央揃え
CSS版
.nav-item {
height: 48px;
line-height: 48px;
padding: 0 16px;
display: inline-block;
}
Tailwind版
<a class="inline-block h-12 leading-12 px-4">
ホーム
</a>
ナビゲーションの高さが揃い、テキストが中央に配置されます。
実践例：アイコン＋テキストの小要素
CSS版
.item {
height: 32px;
line-height: 32px;
display: inline-block;
}
Tailwind版
<div class="inline-block h-8 leading-8">
⭐ お気に入り
</div>
アイコンとテキストが自然に中央揃えされます。
line-height センタリングの注意点（深掘り）
1. 複数行になると崩れる
line-height は「行の高さ」なので、複数行になると中央揃えではなくなります。
複数行の中央揃えは flexbox を使うのが正解です。
2. フォントによって見た目が微妙に変わる
フォントの ascender / descender（上下のはみ出し量）が違うため、
完全な中央ではなく「やや上寄り」に見えることがあります。
3. 高さがレスポンシブに変わる場合は不向き
height と line-height を一致させる必要があるため、
高さが可変の UI では使いにくいです。
line-height と flex の使い分け
| 要素の種類 | 最適な方法 |
|---|---|
| 1行テキスト | line-height センタリング |
| 複数行テキスト | flexbox |
| アイコン＋テキスト | flexbox or line-height（小要素ならOK） |
| 高さが固定 | line-height |
| 高さが可変 | flexbox |
まとめ
line-height センタリングは、1行テキストを縦方向に中央揃えする最も軽量でシンプルな方法です。
- height と line-height を一致させる
- ボタン・タグ・ナビゲーションに最適
- 複数行や可変高さには不向き
- Tailwind では
h-*とleading-*を一致させる
