How to Center Content with Tailwind CSS (5 Ways)

In this article, I’ll explore five different methods to center a div using Tailwind CSS. Let’s jump right in!

Margin

You can horizontally center a div by setting its left and right margins to auto. This method works best when the div has a specified width.

<div class="w-1/2 p-4 mx-auto text-center border">
  I'm a centered div using margins!
</div>

In the above code, mx-auto sets the horizontal (left and right) margins to auto, while w-1/2 sets the div’s width to 50% of its parent’s width.

Transforms

Another method is to use CSS transforms. This approach involves positioning the div halfway down and across its parent container, then using a transform to pull it back by half of its own height and width.

  <div class="relative h-16">
    <div class="absolute p-4 text-center transform -translate-x-1/2 -translate-y-1/2 border top-1/2 left-1/2">
      I'm a centered div using transforms!
    </div>
  </div>

In this code, relative gives the parent div a position context. Then, the first (and only) div child is set to position absolute, which takes the div out of the layout flow.

In this scenario, the absolutely positioned div would make its parent have no height because the div has no layout to take up space. This is why we need to add h-16 to the parent, so there’s height for the absolute positioned child to use and take up the space.

top-1/2 and left-1/2 position the child div halfway across and down the parent. The transform -translate-x-1/2 -translate-y-1/2 pulls the child div back by half its own width and height, effectively centering it.

Absolute Positioning

Absolute positioning can be used to center a div by setting the top, bottom, left and right properties to 0 and margin to auto. Top, bottom, left and bottom can be consolidated if you use the inset property.

  <div class="relative h-16 p-4 border">
    <div class="absolute inset-0 w-4 h-4 mx-auto my-auto bg-black"></div>
  </div>

In this code, relative sets the parent’s positioning context. The absolute utility positions the child div, and the inset-0 utilities place it in the center. mx-auto and my-auto are used to center the child div. The h-32 and w-32 utilities give the child div a fixed height and width.

Flexbox

Flexbox is a CSS module designed to layout, align, and distribute space among items in a container, even when their size is unknown or dynamic.

  <div class="flex items-center justify-center h-16">
    <div class="p-4 border">
      I'm a centered div using Flexbox!
    </div>
  </div>

In this example, flex makes the div a flex container. items-center vertically aligns the child div in the center and justify-center horizontally aligns it, effectively centering the div. h-screen makes the parent div occupy the whole height of the screen.

Grid

CSS Grid Layout is a 2-dimensional system, meaning it can handle both columns and rows. We can center a div by making its parent a grid container and using the place-items utility to center the child div.

  <div class="grid h-16 place-items-center">
    <div class="p-4 border">
      I'm a centered div using Grid!
    </div>
  </div>

In this example, grid makes the parent div a grid container. place-items-center centers the child div both vertically and horizontally. h-screen makes the parent div take up the full height of the screen.