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

How do I center a div horizontally using Tailwind?

Asked on Nov 16, 2025

Answer

To center a div horizontally using Tailwind CSS, you can utilize the flexbox utilities. By setting the parent container to display as flex and using the "justify-center" utility, the child div will be centered horizontally.

<!-- BEGIN COPY / PASTE -->
    <div class="flex justify-center">
      <div class="w-1/2 bg-blue-500">
        Centered Content
      </div>
    </div>
    <!-- END COPY / PASTE -->

Additional Comment:

The "flex" class makes the parent a flex container.
"justify-center" centers the child elements horizontally within the flex container.
Ensure the child div has a defined width (e.g., "w-1/2") to see the centering effect clearly.

✅ 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 using Tailwind?

Asked on Nov 16, 2025

Answer

The Q&A Network