Center a div with Flexbox 💪
By Sulamita Ivanov

Posted on 10/12/2023

Center a div with Flexbox 💪

There are several ways to center a div but this tutorial will teach you how to use Flexbox with TailwindCSS.

Rule #1 👩‍👧

The content you want to center needs to be contained within a parent element.

<div class="">
    <p>Center this div</p>
</div>

Rule #2 📏

Add a height and/or width (depending on your styling) to the parent div. *This is important when you want to center a div vertically and horizontally because it needs to have a reference to center the item.

<div class="h-14">
    <p>Center this div</p>
</div>

Rule #3 💪

Lastly, add the 3 following properties:
🗣️ flex: declaring Flexbox
↔️ justify-center: aligns horizontally
↕️ items-center: aligns vertically

<div class="h-14 flex justify-center items-center">
    <p>Center this div</p>
</div>

Example