Tailwind CSS で要素やテキストを中央に寄せる方法

皆さん、こんにちは。管理人です。今回は、Tailwind CSS で要素やテキストを中央に寄せる方法について述べたいと思います。

Contents

テキストを左右中央に寄せる場合

テキストを左右中央に寄せたい場合は、text-center を指定します。

See the Pen Tailwind CSS で by Shigotoron@GitHub (@s31104989) on CodePen.

テキストを上下中央に寄せたい場合は、テキストを直接囲む要素の親要素に flex と items-center を指定するのが良いかと思います。

テキストを上下左右中央に寄せたい場合は、テキストを直接囲む要素の親要素に flex と items-center と justify-center を指定するのが良いかと思います。

要素を親要素の左右中央に寄せたい場合は、mx-auto を利用します。（これにより、CSS で margin-left: auto、margin-right: auto と指定したのと同じことになり、左右の margin が等しくなるため、中央寄せされます。）

要素を親要素の上下中央に寄せたい場合は、テキストの場合と同様に、親要素に flex と items-center を指定するのが良いかと思います。

要素を親要素の上下左右中央に寄せたい場合は、テキストの場合と同様に、親要素に flex と items-center と justify-center を指定するのが良いかと思います。