Ted

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.

That's all!

Hope this blog post was useful.