How can I center a div both vertically and horizontally using Tailwind CSS?
Asked on Aug 28, 2025
Answer
To center a div both vertically and horizontally using Tailwind CSS, you can utilize the flexbox utilities. By setting the container to `flex`, and using `justify-center` and `items-center`, you can achieve perfect centering.
<!-- BEGIN COPY / PASTE -->
<div class="flex justify-center items-center h-screen">
<div class="bg-blue-500 text-white p-6 rounded">
Centered Content
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The outer div uses `flex` to enable flexbox layout.
- `justify-center` centers content horizontally.
- `items-center` centers content vertically.
- `h-screen` makes the container full height of the viewport.
Recommended Links: