Centering a Div with Tailwind CSS

Arpita Roy — Thu, 02 Nov 2023 14:38:02 +0000

To center a div both horizontally and vertically, you can use both Flexbox or grid. First, we must assign a height to the div, as a div's default height is zero.

Here's an example with grid:

<div class="grid place-items-center bg-gray-400 h-screen ">
    <div>
        Hello world!
    </div>
</div>

In this example, grid makes the container a grid container. Use place-items-center to place grid items on the center of their grid areas on both axes.h-screen makes the height of the container 100% of the viewport height (100vh).

Here's an example with flexbox:

<div class="flex justify-center items-center h-screen">
  <div>
    Your Content
  </div>
</div>

In this example, flex makes the container a flex container. justify-center and items-center center the child div along both the main axis and the cross axis. h-screen makes the height of the container 100% of the viewport height (100vh).

Forem: Arpita Roy

Centering a Div with Tailwind CSS