Tailwind CSS で中央揃え

毎回ハマるCSSの中央揃え。
備忘用にサッと書いたものなので、この記事の信憑性は微妙です。
（この記事には noidex 属性も付与しています）

結論

そのタグの display プロパティが block なのか inline なのかにより、当てるべきクラスが異なる。

displayプロパティの種類	該当する主なタグ	縦の中央揃え	横の中央揃え
block	p, div, ul	my-auto	mx-auto text-center
inline	a, label, span, img,	align-middle	text-center
inline-block	なし？	align-middle	text-center

元々 inline-block であるタグは存在せず、 inline-block をクラスに付与することで動的にその属性になる。

<div className="w-full">
  <p className="text-center">
    test
  </p>
</div>

<div className="w-full">
  <p className="w-1/2 text-center"> 
    test
  </p>
</div>

これだとblock内のテキストは中央寄せにならない点に注意。 divの横幅 > pの横幅でないと中央寄せされているかどうかは分かりにくいため、上記の例では

テキストも中央寄せするならば text-center と mx-auto　の両方を併用すると良い。