tailwind 中央寄せマニュアル 16

css tailwind

cssの中央寄せ種類ありすぎ問題。

何度も見返すのが面倒などのまとめる。 後から追記もするかも。

前提

基本的に、中央寄せは一つのプロパティに一つの軸だけしか対応していない。縦横中心に寄せたいなら2つのプロパティを指定する必要がある。

要点3つ

中央寄せといってもx軸とy軸でちがいあり、何を対象にして中央寄せるするのかによっても変わってくる。そして、交差軸も考慮しないといけない。 交差軸はいかに書いてある。今回は交差軸がrowの場合を想定する。

developer.mozilla.org

そしてぱっと見で分かるように以下の3点にまとめる。

  • 何軸に中央寄せするか
  • どの要素が中央寄せされるか
  • どの要素に記載するか
想定する要素

要素は2種類。すべてを囲む親要素と、それに含まれる子要素。

<div> <!-- 親要素 -->
  <div>01</div> <!-- 子要素 -->
  <div>02</div>
  <div>03</div>
</div>

中央寄せ一覧

１. justify-center

※flexが必要 1. y軸に寄せる 2. コンテナ（親要素）に囲まれた子要素を中央寄せ 3. コンテナ（親要素）に記載する

2. items-center
  1. x軸に寄せる
  2. コンテナ（親要素）に囲まれた子要素を中央寄せ
  3. コンテナ（親要素）に記載する
3. text-center
  1. y軸に寄せる
  2. 自要素の文字を中央寄せ
  3. 自要素に記載
4. mx-auto
  1. x軸に寄せる
  2. 自要素を中央寄せ
  3. 自要素に記載
5. place-content-center

※flexが必要 1. x軸、y軸に寄せる 2. コンテナに入っている子要素を上下左右中央寄せ 3. 親要素に記載

6. content-center

f※flexが必要 1. x軸に寄せる 2. コンテナに入っている子要素を央寄せ 3. 親要素に記載

6. content-center

f※flexが必要 1. x軸に寄せる 2. コンテナに入っている子要素を央寄せ 3. 親要素に記載