Ask any question about Tailwind CSS here... and get an instant response.

How do I center a div vertically using Tailwind classes?

Asked on Nov 09, 2025

Answer

To center a div vertically using Tailwind CSS, you can use flexbox utilities. By setting the parent container to use flexbox 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-4">
        Centered Content
      </div>
    </div>
    <!-- END COPY / PASTE -->

Additional Comment:

The "flex" class is applied to the parent container to enable flexbox layout.
"items-center" vertically centers the content within the flex container.
"justify-center" horizontally centers the content, which is often desired alongside vertical centering.
The "h-screen" class makes the parent container take the full height of the viewport, ensuring vertical centering works.

✅ Answered with Tailwind CSS best practices.

Ask any question about Tailwind CSS here... and get an instant response.

How do I center a div vertically using Tailwind classes?

Asked on Nov 09, 2025

Answer

The Q&A Network