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.
Recommended Links: