5 Best Ways to Center a Div in TailwindCSS

In almost every webpage, you need to center the content vertically and horizontally. You also want to stick in the center no matter what screen size is being used. Here is a complete guide to center a div in TailwindCSS with ease.

Method 1: Using Flexbox to Center a Div in TailwindCSS

In TailwindCSS, you can use flexbox properties justify-content and align-items to make a div centered. The following code is an example of using flexbox to center a div element. Please check the example online on tailwind playground.

The above example will output a centered div like the screenshot below.

Method 2: Using Grid to Center a Div in TailwindCSS

You can also use grid to center a div horizontally and vertically in TailwindCSS. You just have to add 2 classes to the parent container. The first class is grid will set the display grid property and the second class place-items-center will do the rest to make the child center. Here is a simple example that you can verify online using TailwindCSS.

Method 3: Using Transform and Translate in TailwindCSS

To center a div horizontally and vertically, you can also use transform and translate properties. Please note that it works with position:absolute property. So, this is good when you want an absolute element to stick in the center like a newsletter popup. Here is the code snippet and the working example on the tailwind playground.

Method 4: Use Margin to Center a Div Element

You can center a div horizontally with margin-left and margin-right properties. In TailwindCSS, you can use the mx-auto class to center a div horizontally. The following code snippet is an example of using margin in TailwindCSS. You can check the working example on tailwind play.

Method 5: Using inline-block to Center a Div

This method doesn’t center the div element vertically but it does the job to center horizontally. In the following example, you can see only 1 class is added to the parent, and 1 is added to the child element. Please check the working example to verify the div centered on the page.

Conclusion

There are many ways to center a div in TailwindCSS. The best way to center a div is to use flexbox or grid in TailwindCSS. You can use any of the above methods to make a div element stick to the center of a web page. If you want to center an image, read about how to center an image in TailwindCSS.