How do I center a div horizontally using Tailwind utilities?

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

Post this Question & Answer:

How do I center a div horizontally using Tailwind utilities?

Asked on Oct 04, 2025

Answer

To center a div horizontally using Tailwind CSS, you can use the `mx-auto` utility, which applies automatic margins on the left and right of the element. This is effective when the div has a defined width or is inside a flex or grid container.

<!-- BEGIN COPY / PASTE -->
    <div class="container mx-auto">
      <div class="w-1/2 bg-blue-500">
        Centered Content
      </div>
    </div>
    <!-- END COPY / PASTE -->

Additional Comment:

The `mx-auto` utility is shorthand for setting both `margin-left` and `margin-right` to `auto`.
Ensure the parent container has a defined width or uses flex/grid layout to enable centering.
Adjust the width of the centered div using utilities like `w-1/2` or `w-full` as needed.

✅ 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 utilities?

Asked on Oct 04, 2025

Answer

Real Questions. Clear Answers.