How to Center a Div in Tailwind CSS

In this section we will see how to center div in tailwind css. We can center div horizontally and vertically using grid and flex.

Example 1

Center div using tailwind grid.

<div class="grid h-screen place-items-center">
  <div class="bg-indigo-600 p-4 text-white shadow">Center Div</div>
</div>

Example 2

Center div using tailwind flex classes.

<div class="flex h-screen items-center justify-center">
  <div class="bg-indigo-600 p-4 text-white shadow">Center Div</div>
</div>

tailwind div center using flex classes