How to Center a Div in CSS (Every Way That Works)

"How do I center a div?" is the most famous joke in web development, because it used to be genuinely awkward. Today it's a couple of lines. Here's every method worth knowing, and when each one is the right choice.

Center both ways: Grid (shortest)

.parent {
  display: grid;
  place-items: center;
  min-height: 100vh;   /* the parent needs height to center within */
}

Tailwind: grid place-items-center min-h-screen

place-items: center centers the child horizontally and vertically. This is the one to remember.

Center both ways: Flexbox

.parent {
  display: flex;
  justify-content: center;  /* horizontal (along the row) */
  align-items: center;      /* vertical */
  min-height: 100vh;
}

Tailwind: flex items-center justify-center min-h-screen

Use Flexbox when the parent holds a row of things, or you're already using it for layout. (Flexbox vs Grid)

Center horizontally only

A block with a width — margin auto:

.card {
  max-width: 600px;
  margin-inline: auto;   /* same as margin-left: auto; margin-right: auto */
}

Tailwind: max-w-xl mx-auto

This is how most page content is centered. The element must have a width (or max-width) smaller than its parent, otherwise it fills the whole row and there's nothing to center.

Text and inline things:

.heading { text-align: center; }

Tailwind: text-center

text-align centers text, inline elements, and inline-block elements inside the element — not the element itself.

Center vertically only

Flexbox on the parent, with align-items: center (and no justify-content):

.row {
  display: flex;
  align-items: center;   /* icon and text lined up vertically */
  gap: 0.5rem;
}

Tailwind: flex items-center gap-2

This is the classic "icon next to text" fix.

Center over everything: absolute positioning

For overlays, badges and modals positioned on top of other content:

.parent { position: relative; }

.overlay {
  position: absolute;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
}

or the older but still common version:

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Tailwind: absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2

For a modal over the whole page, use position: fixed instead of absolute.

Cheat sheet

Want	CSS	Tailwind
Both ways	`display:grid; place-items:center`	`grid place-items-center`
Both ways (flex)	`display:flex; justify-content:center; align-items:center`	`flex justify-center items-center`
Horizontal block	`margin-inline:auto` + width	`mx-auto max-w-…`
Horizontal text	`text-align:center`	`text-center`
Vertical in a row	`display:flex; align-items:center`	`flex items-center`
Overlay	`position:absolute; inset:0; margin:auto`	`absolute inset-0 m-auto`

"It's not centering!"

The parent has no height. Vertical centering needs space to center within. A div is only as tall as its content by default. Add min-height: 100vh (or a fixed height).
The element is full width. Block elements stretch to fill the row, so margin: auto has nothing to do. Give it a width or max-width.
You put the centering on the child. justify-content and align-items go on the parent.
Something else overrides it. Open dev tools, select the element, and check which styles are crossed out. (Browser developer tools)
It's centered, but there's extra space. Default margins on body, headings or paragraphs push things off. Check the box model in dev tools.

The summary

Both directions: display: grid; place-items: center on the parent.
Horizontal block: margin-inline: auto with a width.
Icon and text: display: flex; align-items: center.
Vertical centering needs the parent to have height.

EasySpawn runs your app with a live preview on a persistent server, so you (or Claude Code) can tweak a layout and see it on any device instantly. See how it works or join the waitlist.

How to Center a Div (Horizontally, Vertically, or Both)