How do I center a div both vertically and horizontally using Tailwind?

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

Post this Question & Answer:

How do I center a div both vertically and horizontally using Tailwind?

Asked on Nov 10, 2025

Answer

To center a div both vertically and horizontally using Tailwind CSS, you can use flexbox utilities. By setting the parent container to "flex" and using "justify-center" and "items-center", you can achieve perfect centering.

<!-- 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:

"flex" makes the parent a flex container.
"justify-center" centers content horizontally.
"items-center" centers content vertically.
"h-screen" ensures the container takes 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 do I center a div both vertically and horizontally using Tailwind?

Asked on Nov 10, 2025

Answer

Real Questions. Clear Answers.