How to center a div in TailwindCSS

The most difficult question in development... how to center a div.

Well, don't worry, because it is very simple in TailwindCSS - and you have a choice of which ever works best for you.

Method 1

We can use grid to center a div.

<div class="grid h-screen place-items-center">
	<p>I'm centered!</p>
</div>

Let's break down what is happening here:

grid gives the div the display: grid CSS property.

place-items-center gives the center value in place items CSS property.

h-screen ensures that the height is the full screen, 100vh.

Method 2

We can use flexbox to center a div.

<div class="flex items-center justify-center h-screen">
	<p>I'm centered!</p>
</div>

Let's break down what is happening here:

flex gives the div the display: flex CSS property.

justify-center centers the div horizontally.

items-center centers the div vertically.

h-screen ensures that the height is the full screen, 100vh. test

That's all!

Hope this blog post was useful.