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

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

Asked on Aug 28, 2025

Answer

To center a div both vertically and horizontally using Tailwind CSS, you can utilize the flexbox utilities. By setting the 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-6 rounded">
        Centered Content
      </div>
    </div>
    <!-- END COPY / PASTE -->

Additional Comment:

The outer div uses `flex` to enable flexbox layout.
`justify-center` centers content horizontally.
`items-center` centers content vertically.
`h-screen` makes the container 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 both vertically and horizontally using Tailwind CSS?

Asked on Aug 28, 2025

Answer

The Q&A Network