How to Center a `<div>` in Tailwind CSS?

Center a <div> in Tailwind CSS

Centering Horizontally

Step 1: Applying the Flexbox Utility

To horizontally center a <div> element, Tailwind CSS provides a convenient flexbox utility. By applying the flex and justify-center classes, you can achieve horizontal centering effortlessly. Here's an example of how to do it:

<div class="flex justify-center">
  <!-- Your content here -->
</div>

The justify-center class will distribute available space evenly on both sides of the <div>, effectively centering it horizontally within its parent container.

Centering Vertically

Step 2: Using Flexbox for Vertical Centering

Vertical centering often requires a combination of CSS properties. In Tailwind CSS, you can use the flex utility along with the items-center class to achieve this:

<div class="flex items-center">
  <!-- Your content here -->
</div>

By applying the items-center class, the content inside the <div> will be vertically centered within the container.

Centering Both Horizontally and Vertically

Step 3: Combining Flexbox Classes

For complete centering—both horizontally and vertically—you can combine the flex class with both justify-center and items-center classes:

<div class="flex items-center justify-center">
  <!-- Your content here -->
</div>

This combination of classes ensures that the <div> element is perfectly centered both horizontally and vertically.

Advanced Centering Techniques

Step 4: Utilizing the mx-auto Class

Tailwind CSS also offers the mx-auto class, which can be particularly useful for centering a <div> horizontally:

<div class="mx-auto">
  <!-- Your content here -->
</div>

This class applies horizontal margins to the <div>, causing it to automatically center itself within its parent container.

Step 5: Applying Absolute Positioning

In cases where flexbox doesn't provide the desired outcome, you can resort to absolute positioning. Combine the absolute class with top-1/2 and left-1/2 to center a <div> both horizontally and vertically:

<div
  class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform"
>
  <!-- Your content here -->
</div>

The -translate-x-1/2 and -translate-y-1/2 classes ensure precise centering by offsetting the element by half of its width and height.