Posted on 12/12/2023
Another common way to center a div is with grid. I personally prefer Flexbox shown here.
Using grid is very simple, just add the following properties to the parent div:
Wrap the child element within the parent div
<div class="">
<p>Center this div</p>
</div>
Add a height to the parent element
<div class="h-36">
<p>Center this div</p>
</div>
Just like flex, you need to declare grid and place-items-center to center the div.
*You will also need to set the amount of columns, in this case I set it to 1.
<div class="h-36 grid grid-cols-1 place-items-center">
<p>Center this div</p>
</div>