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

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

Post this Question & Answer:

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

Asked on Nov 24, 2025

Answer

To center a div both horizontally and vertically in Tailwind CSS, you can use the flexbox utilities. By setting the parent container to `flex`, `justify-center`, and `items-center`, the child div will be perfectly centered.

<!-- BEGIN COPY / PASTE -->
    <div class="flex justify-center items-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 container a flexbox, allowing for flexible alignment.
`justify-center` centers the content horizontally within the flex container.
`items-center` centers the content vertically within the flex container.
`h-screen` sets the height of the container to the full viewport height, ensuring vertical centering.

✅ 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 horizontally and vertically with Tailwind?

Asked on Nov 24, 2025

Answer

Real Questions. Clear Answers.