Step 1: Web Basics

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

中央配置は、親のサイズとFlexboxの軸を確かめると説明できます。猫の手ツールの証明写真では、アップロード領域を縦並びのFlexコンテナーにして、アイコンや選択ボタンを中央へ置いています。クラスを付ける前に、どの領域のどの方向を揃えたいかを確認します。

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: 交差軸の中央揃えを行います。通常の横書き・flex-rowでは上下、flex-colでは左右です。
justify-center: 主軸の中央揃えを行います。通常の横書き・flex-rowでは左右、flex-colでは上下です。

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-full（height: 100%）は親側の高さが確定していなければ期待どおりにならないことがあります。文章が増える画面では、固定高よりmin-heightを使った方が切れにくくなります。

flex-col に変えたら、揃える軸も変わる

縦に並べたカードの上下中央を調整したいなら justify-center、左右中央なら items-center です。次の例では最小の高さを用意し、文章が長い場合は親も伸びるようにします。Tailwind CSSを読み込んだページで確認できます。

<div class="flex min-h-48 flex-col items-center justify-center gap-3 p-6">
  <p>画像を選択してください</p>
  <button type="button">写真をえらぶ</button>
</div>

中央に寄らない場合は、親が本当にflexか、主軸の向き、空いている領域、子のmarginを順に確認します。単に大きな高さを付ける前に、開発者ツールのレイアウト表示で範囲を確かめます。

証明写真のアップロード領域で、親の高さと軸を見る

履歴書写真メーカーのアップロード領域はflex flex-col items-center justify-center h-80です。flex-colなので主軸は縦、交差軸は横になります。h-80で領域の高さを持たせているため、上下中央の位置も目で確認できます。

.upload-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 20rem;
}

上は本番クラスの意図を通常のCSSで示した説明用の等価例です。高さをmin-heightに変え、内容が増えたときは伸びるようにしています。本番はTailwind CSS 4.2.2をビルドして使用します。クラス名だけを新しいHTMLへ貼ってもCSSは存在しないため、初めはこの通常CSSで配置を確かめる方法もあります。証明写真の制作解説では画像の切り抜きへ進めます。

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

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

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

親の範囲・方向・子のサイズを分けて確認すれば、配置を調整する理由を説明できます。長い文言、文字の拡大、狭い画面でも内容が欠けないことを別途確認します。

参考資料

MDN：Flexboxの基本概念（別タブで開く）