How to Center Text in TailwindCSS – [2 Simple Ways]

Centering text is a very common requirement in web design, and TailwindCSS offers straightforward solutions to achieve this. In this blog post, You’ll learn two simple methods to center text using TailwindCSS. Whether you need to center text horizontally, vertically, or both, TailwindCSS is here to help you.

Method 1: Using text-center Class to Horizontally Center Text

If you want to center text horizontally in TailwindCSS, you can simply use the text-center utility class. Let’s take a look at an example:

In the example above, a simple text-center class is used to center the text horizontally. You can check the working example on TailwindCSS playground. The output is attached below in a screenshot.

Method 2: Vertically and Horizontally Centering Text with TailwindCSS

If you need to center the text both vertically and horizontally, TailwindCSS provides a powerful combination of flexbox utility classes. In this case, you can apply the flex class to create a flex container, and then we use the justify-center and items-center classes for centering the text horizontally and vertically within the container. Here is a simple example.

You can check the working code example and the output is attached below.

If you want to center a div element on a page, here are the 5 simple methods to center a div element and to center an image, you can check the post about centering an image with TailwindCSS.

Conclusion

Centering text in your web design can significantly enhance the visual appearance and readability of your content. You can achieve this using TailwindCSS with a few lines of code. Here are the 2 simple methods to center a text in TailwindCSS, First is to use the text-center class for horizontal centering and the second is to utilize the flex, justify-center, and items-center classes for both vertical and horizontal centering.