OneBite.Dev - Coding blog in a bite size

How to Center a Div in Tailwind CSS (Multiple Ways!)

Master the techniques of centering a div in Tailwind CSS, both horizontally and vertically. This guide provides practical examples using Flexbox and Grid layout utilities for precise element positioning

Tailwind CSS is a highly customizable, utility-first CSS framework that is growing in popularity due to its easy and efficient approach to styling web pages. One common task in CSS is centering an element, which can sometimes be more complex than it appears. In this tutorial, we’ll walk you through how to center a `div` in Tailwind CSS both vertically and horizontally.

Horizontal div center in Tailwind CSS

Horizontal centering in Tailwind CSS is a straightforward task. You can use the `mx-auto` class, which applies automatic horizontal margins to an element, thus centering it.

<div class="mx-auto w-1/2 bg-blue-500 text-white text-center p-4">
  This is a centered div.
</div>

In the example above, `w-1/2` sets the width of the `div` to 50% of the parent container. `mx-auto` then centers the `div`. The `text-center` class is used to center the text within the `div`, and `p-4`, `bg-blue-500`, and `text-white` are used for padding, background color, and text color respectively.

Centering a Div Vertically in Tailwind CSS

Vertical centering is a bit more complex because it usually requires a parent element with a defined height. You can achieve vertical centering by using Flexbox or Grid display utilities provided by Tailwind CSS.

Flexbox Approach

In this approach, you need to create a parent `div` with `h-screen` (100% viewport height), `flex` (flexbox layout), and `items-center` (aligns children along the vertical axis) classes.

<div class="h-screen flex items-center">
  <div class="mx-auto w-1/2 bg-blue-500 text-white text-center p-4">
    This is a vertically centered div.
  </div>
</div>

In this example, the child `div` is centered vertically inside the parent `div`.

Grid Approach

Alternatively, you can use CSS Grid layout utilities to center the `div` vertically:

<div class="h-screen grid place-items-center">
  <div class="w-1/2 bg-blue-500 text-white text-center p-4">
    This is a vertically centered div.
  </div>
</div>

The `place-items-center` class will center the child `div` both vertically and horizontally in the grid.

Centering a Div Both Horizontally and Vertically

To center a `div` both horizontally and vertically, you can combine the approaches mentioned above:

Flexbox Approach

<div class="h-screen flex items-center justify-center">
  <div class="w-1/2 bg-blue-500 text-white text-center p-4">
    This is a centered div.
  </div>
</div>

The `justify-center` class is added to align the child `div` along the horizontal axis, effectively centering it both vertically and horizontally.

Grid Approach

The grid approach remains the same as in the vertical centering example, because `place-items-center` centers the child `div` both vertically and horizontally.

<div class="h-screen grid place-items-center">
  <div class="w-1/2 bg-blue-500 text-white text-center p-4">
    This is a centered div.
  </div>
</div>

Conclusion

Centering a `div` in Tailwind CSS, both horizontally and vertically, is straightforward thanks to the utility-first classes it provides. By leveraging the power of modern CSS layout techniques like Flexbox and Grid, you can achieve precise alignment and positioning of elements on your web pages. As a utility-first CSS framework, Tailwind allows for clean, readable, and efficient HTML markup. Keep practicing these techniques, and you’ll quickly become proficient in creating responsive, beautifully styled web pages with Tailwind CSS.

tailwind