How can I center a div horizontally and vertically using Tailwind?
Asked on Oct 06, 2025
Answer
To center a div both horizontally and vertically using Tailwind CSS, you can utilize the flexbox utilities. By setting the parent container to display as flex and using the justify-center and items-center classes, you can achieve this centering effect.
<!-- 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:
- The parent div uses "flex" to enable flexbox layout.
- "justify-center" centers the content horizontally.
- "items-center" centers the content vertically.
- "h-screen" makes the parent div take the full height of the viewport.
Recommended Links: