How to Center Items on a div

I know that sometimes it can be a nightmare to centre items on a div for this reason I've decided to create this tutorial.

For all of you who are attempting to centre items on the middle of the screen I know it's not easy and there are multiple ways. That's why I've decided present a couple of ways to do it easily using tailwindcss.

First Option

<div class="flex justify-center align-middle">
  <div class="w-20 h-20">
    Centered using flex
  </div>
</div>

Second Option

<div class="grid place-items-center h-screen">
  Centered using Grid
</div>

That's it, you can see it's quite simple.

Please let me know if you think of another way