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

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.

✅ Answered with Tailwind CSS best practices.

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

How can I center a div horizontally and vertically using Tailwind?

Asked on Oct 06, 2025

Answer

The Q&A Network