How do I center a div vertically with Tailwind utilities?
Asked on Oct 01, 2025
Answer
To center a div vertically using Tailwind CSS, you can utilize the flexbox utilities. By setting the parent container to display as flex and aligning items to the center, you achieve vertical centering.
<!-- BEGIN COPY / PASTE -->
<div class="flex items-center justify-center h-screen">
<div class="bg-blue-500 text-white p-6 rounded">
Centered Content
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The "flex" class makes the parent a flex container.
- "items-center" vertically centers the child elements within the parent.
- "justify-center" horizontally centers the child elements.
- "h-screen" sets the height of the parent to the full viewport height, ensuring the child is centered vertically.
Recommended Links: