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

How do I center a div horizontally and vertically with Tailwind utilities?

Asked on Nov 20, 2025

Answer

To center a div both horizontally and vertically using Tailwind CSS, you can utilize flexbox utilities. By setting the parent container to be a flex container and using justify-center and items-center, you can align the child div in the center.

<!-- BEGIN COPY / PASTE -->
    <div class="flex items-center justify-center h-screen">
      <div class="bg-blue-500 text-white p-8">
        Centered Content
      </div>
    </div>
    <!-- END COPY / PASTE -->

Additional Comment:

The class "flex" makes the parent a flex container.
"items-center" vertically centers the child within the parent.
"justify-center" horizontally centers the child within the parent.
"h-screen" sets the height of the parent to the full viewport height.

✅ Answered with Tailwind CSS best practices.

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

How do I center a div horizontally and vertically with Tailwind utilities?

Asked on Nov 20, 2025

Answer

The Q&A Network