Center a Div Instantly with Tailwind Flexbox

The one-liner: flex, items-center, and justify-center

The fastest way to center a div both horizontally and vertically in Tailwind CSS is three utility classes on the parent element: flex, items-center, and justify-center. Then give the parent a height — min-h-screen for the full viewport — so there is vertical space to center within.

justify-center centers children along the main (horizontal) axis, and items-center centers them along the cross (vertical) axis. Used together they place the child in the exact middle of the container.

<div class="flex items-center justify-center min-h-screen">
  <div>Centered</div>
</div>

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

Why items-center isn't centering vertically

The most common reason a div refuses to center vertically is that its parent has no height. A flex container is only as tall as its content by default, so items-center has no spare vertical space to work with. Give the parent an explicit height and the child snaps to the middle.

Use min-h-screen for a full-viewport section, h-full when the parent already sits inside a sized ancestor, or a fixed height like h-96 for a self-contained box.

Center on one axis only

When you only need one direction, drop the utility for the axis you do not care about. Horizontal only: use flex justify-center. Vertical only: use flex items-center together with a parent height. A single block that has a width: mx-auto centers it horizontally with no flexbox at all.

<div class="flex justify-center">
  <div>Centered horizontally</div>
</div>

<div class="mx-auto w-64">Centered horizontally</div>

The Grid shortcut: place-items-center

CSS Grid offers an even shorter route. grid place-items-center centers children on both axes in a single utility — no separate justify and items classes needed. For one centered child it behaves identically to the flex version, so the choice comes down to preference.

<div class="grid place-items-center min-h-screen">
  <div>Centered</div>
</div>

Common mistakes

The parent has no height. Vertical centering needs vertical space — add min-h-screen or a fixed height to the container.

Using text-center for a block. text-center only centers inline content and text, not a block-level child element.

Putting the alignment on the child. flex, items-center, and justify-center belong on the parent container, not on the element you want centered.

Forgetting flex or grid. The alignment utilities do nothing until the container is a flex or grid context.

Frequently asked questions

How do I center a div horizontally and vertically in Tailwind CSS?

Put flex items-center justify-center on the parent element and give it a height such as min-h-screen. items-center handles vertical centering and justify-center handles horizontal centering.

Why is items-center not centering my div vertically?

Because the flex container has no extra vertical space. A flex parent is only as tall as its content unless you set a height. Add min-h-screen, h-full, or a fixed height and vertical centering works.

How do I center a div without flexbox?

Use grid place-items-center on the parent to center on both axes, or mx-auto on a block element that has a defined width to center it horizontally only.

What is the difference between place-items-center and items-center?

place-items-center is a CSS Grid shorthand that sets both align-items and justify-items at once. items-center only sets cross-axis alignment and is used with flexbox alongside justify-center.