How to Center a Div in CSS: Every Method and When to Use It

The short answer: grid with place-items

If you want one child centered both horizontally and vertically inside its parent, this is the whole solution. place-items is shorthand for align-items and justify-items, so one line centers on both axes.

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

That min-height is not decoration. It is the line people leave out, and it is the reason most centering attempts appear to fail. More on that below.

Flexbox: two properties, two axes

Flexbox centers with justify-content on the main axis and align-items on the cross axis. With the default flex-direction: row, the main axis is horizontal, so the pair below centers on both.

.parent {
  display: flex;
  justify-content: center; /* main axis: horizontal in a row */
  align-items: center;     /* cross axis: vertical in a row */
  min-height: 100vh;
}

Switch to flex-direction: column and the two properties trade jobs: justify-content now moves things vertically and align-items horizontally. Forgetting that swap is the single most common flexbox confusion, which is why it is worth watching it happen in a playground once rather than memorising it.

Horizontal only: margin auto

For a block element with a known width in normal flow, auto margins on the left and right center it horizontally. This is the classic way to center a page wrapper.

.wrapper {
  max-width: 960px;
  margin-inline: auto;
}

It only works horizontally. In normal block flow, vertical auto margins resolve to zero, so this will never center anything top to bottom on its own.

Centering text is a different problem

text-align: center centers the inline content inside a box: the words, an inline image, an inline-block button. It does not move the box itself. If a heading looks centered but its container is not, that is the difference you are seeing.

Out of flow: absolute positioning

When the element must sit on top of other content, a modal or a badge over an image, take it out of flow with absolute positioning. This version works without knowing the element's size.

.parent { position: relative; }

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

The top and left move the child's top-left corner to the center; the translate then pulls it back by half its own width and height. Percentages in translate refer to the element itself, which is exactly what makes this size-independent.

Why vertical centering appears not to work

Almost every report of align-items: center doing nothing has the same cause: the parent is only as tall as its content. A block's height defaults to auto, which means it shrinks to fit what is inside it, so there is no extra space to center within. The child is centered, in a box exactly its own height.

Give the parent a height, a min-height, or let it stretch inside a taller layout, and the centering appears instantly. Nothing about the centering code was wrong.

Which one should you use?

• One item, centered both ways: grid with place-items: center.
• Several items in a row or column that also need spacing: flexbox.
• A page wrapper, centered horizontally: margin-inline: auto with a max width.
• Something layered over other content: absolute positioning with the translate trick.
• Text inside a box: text-align: center, which is not box centering at all.