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>