Ask any question about Tailwind CSS here... and get an instant response.
How do I center a div both vertically and horizontally using Tailwind?
Asked on Nov 10, 2025
Answer
To center a div both vertically and horizontally using Tailwind CSS, you can use flexbox utilities. By setting the parent 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-4">
Centered Content
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- "flex" makes the parent a flex container.
- "justify-center" centers content horizontally.
- "items-center" centers content vertically.
- "h-screen" ensures the container takes the full height of the viewport.
Recommended Links:
