Posted on 10/12/2023
There are several ways to center a div but this tutorial will teach you how to use Flexbox with TailwindCSS.
The content you want to center needs to be contained within a parent element.
<div class="">
<p>Center this div</p>
</div>
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>
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>