06. 「中央揃え」の苦労は過去へ：
Tailwind CSSのFlexbox活用術

1. CSS最大の謎、センタリングの歴史

かつてのWeb開発において、上下左右の「中央揃え」はエンジニアを悩ませる最大の難所の一つでした。文字の横方向の中央揃えなら text-align: center;、ブロック要素なら margin: 0 auto; といった具合に、対象によって手法を使い分ける必要がありました。

さらに厄介だったのが「垂直方向（上下）」の中央揃えです。vertical-align: middle; はテーブル要素以外では期待通りに動かないことが多く、無理やり padding を調整したり、絶対配置（absolute positioning）を使ってトリッキーな計算を行ったりしていました。インフラのルーティング設定よりも、CSSの1ピクセルのズレを直す方が時間がかかる……そんな時代もありました。

2. 救世主「Flexbox」という概念

そんな混沌とした状況に終止符を打ったのが Flexbox (Flexible Box Layout) です。これは親要素（コンテナ）に対して「中身の要素をどう並べるか」という強力なルールを課す仕組みです。

Flexboxには「主軸（Main Axis）」と「交差軸（Cross Axis）」という考え方があり、この2つの軸に対して中央配置の指示を出すだけで、要素の種類やサイズに関わらず、完璧なセンタリングが実現します。

Tailwind CSSで使う3つのおまじない

Tailwind CSSを使用すれば、複雑なプロパティ名を覚える必要はありません。親要素に以下の3つのクラスを付与するだけです。

• flex: その要素をFlexコンテナにします。
• items-center: 交差軸（垂直方向）の中央揃えを行います。
• justify-center: 主軸（水平方向）の中央揃えを行います。

3. 具体的な実装比較：Before / After

実際に、要素をど真ん中に配置するコードがどれだけスッキリしたか見てみましょう。

【Before】昔のトリッキーな手法（一例）

/* 縦横中央揃えのために、親と子の両方に指定が必要だった */
.parent {
  position: relative;
  height: 200px;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

【After】現代のTailwind CSSによる手法

<!-- 
  flex: Flexbox有効化
  items-center: 上下中央
  justify-center: 左右中央
  h-48: 高さを指定
-->
<div class="flex items-center justify-center h-48 bg-slate-100 rounded-xl">
  <p class="font-bold text-indigo-600">完璧な中央揃え！</p>
</div>

4. 注意点：高さの定義を忘れないこと

初心者が「中央揃えにならない！」とハマりやすいポイントがあります。それは 「親要素に高さがない」 場合です。

Flexboxは「親要素の範囲内」で中央に寄せます。親要素の高さが中身のテキストと同じ高さしかなければ、上下の中央揃えが機能しているかどうかは見た目では分かりません。h-screen（画面いっぱい）や h-full、あるいは具体的な数値（h-80 など）で、親要素の領域をしっかり確保することが大切です。

5. まとめ：実務での活用シーン

「猫の手ツール」の開発においても、この Flexbox は至る所で活躍しています。

• 画像アップロードエリア: 「写真をえらぶ」というテキストを、点線の枠組みのど真ん中に配置する。
• ローディング画面: 画面のど真ん中で猫のスピナーを回し続け、ユーザーに安心感を与える。
• ボタン内のアイコン: テキストとSVGアイコンを横並びにして、垂直方向を綺麗に揃える。

インフラの構築が論理の積み重ねであるように、UIのレイアウトもまた論理的なルール（Flexbox）に従うことで、どんな端末で見ても崩れない美しさを手に入れることができます。