Step 1: Web Basics

「中央揃え」をTailwindの
Flexboxで解決した話

Web制作で一番の難所と言えば「上下左右の中央揃え」。昔の苦労が嘘のように解決した感動のメモです。

CSS最大の謎、センタリング

昔、少しだけHTMLを触った時、要素を画面のど真ん中に置くのが本当に苦痛でした。text-alignを使ったり、margin: autoを試したり…。でも縦方向の中央がどうしても合わない。そんな経験、ありませんか？

Flexboxという救世主

今回、Tailwind CSSを使い始めて一番驚いたのが Flexbox の扱いやすさです。親要素にたった3つのクラスを書くだけで、中身が吸い付くように中央に配置されます。

<!-- flex: Flexboxを有効にする -->
<!-- items-center: 縦方向の中央 -->
<!-- justify-center: 横方向の中央 -->
<div class="flex items-center justify-center h-80">
  <p>ど真ん中！</p>
</div>

「猫の手貸し」の画像アップロードエリアや、ローディング画面のスピナーも、すべてこの Flexbox で制御しています。あんなに苦労していたセンタリングが、今や「3つの単語」で終わる。CSSの進化、恐るべしです。