How to center a div with Tailwind CSS

Centering a div is still the industry meme because CSS offers three correct answers and twenty wrong ones that “almost” look right. Tailwind does not change the physics. It changes the names. Here is the short map we use in production.

Horizontal center (80% of cases)

If the element is block-level and has a width, mx-auto is enough. For a reading container:

class="mx-auto w-full max-w-3xl"

Do not use text-center to center boxes. That centers text and inline content, not layout.

Both axes (hero, modal, empty state)

Flex:

class="flex min-h-screen items-center justify-center"

Grid, equivalent and often cleaner:

class="grid min-h-screen place-items-center"

A child inside a sized parent

The parent needs a height. min-h-screen, h-64, or an aspect-ratio. Without height, “vertical center” has nothing to measure against. Then items-center justify-center (flex) or place-items-center (grid).

• items-center: cross axis (vertical in a flex-row).
• justify-center: main axis (horizontal in a flex-row).
• place-items-center: both in grid, one utility.
• absolute inset-0 m-auto h-fit w-fit: the old trick; keep it for overlays.

If the layout breaks on mobile, it is almost never “Tailwind.” It is a parent without height, a child with a fixed width wider than the screen, or text-center pretending to be layout. Check those three before adding more classes.