7: How to Actually Center a Div

1. Flexbox

The modern default. Works for unknown content size, multiple children, and responsive layouts. If you only remember one method, remember this one.

Both axes

centered

.parent {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  height: 200px;
}

Horizontal only

centered

.parent {
  display: flex;
  justify-content: center;
}

Vertical only

centered

.parent {
  display: flex;
  align-items: center;
  height: 200px;
}

Try breaking it

Remove height: 200px and vertical centering disappears, because the parent shrinks to fit only its content. Flex needs a height to center vertically against.

2. Grid

place-items: center

centered

.parent {
  display: grid;
  place-items: center; /* shorthand for align + justify */
  height: 200px;
}

place-content: center

centered

.parent {
  display: grid;
  place-content: center;
  height: 200px;
}

place-items centers the child inside its cell, while place-content centers the entire grid inside the parent. For a single child they look identical.

When to pick which: With one child, either works, and place-items is shorter to type. With multiple children, place-content centers the grid as a whole.

3. Absolute + Transform

centered

.parent { position: relative; height: 200px; }
.child {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

How it works:

top:50%; left:50% moves the child's top-left corner to the center.
translate(-50%,-50%) pulls it back by half of its own size.

Gotcha: The parent needs position: relative (or any non-static value) to act as the containing block. Otherwise the child positions against the viewport. This also takes the element out of flow, so siblings ignore it.

4. Absolute + Inset modal favorite

Centered modal (120 by 80)

centered

.parent { position: relative; height: 200px; }
.child {
  position: absolute;
  inset: 0;        /* top/right/bottom/left: 0 */
  width: 120px; height: 80px;
  margin: auto;
}

Modern shorthand, no fixed size needed

centered

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

inset: 0 stretches the absolutely positioned box to all four edges, then margin: auto centers the fixed-size box inside that stretched area. It's a clean pattern for modals.

5. Margin Auto

Horizontal center (block)

centered

.child {
  width: 140px;       /* must be less than the parent */
  margin: 0 auto;     /* or margin-inline: auto */
  display: block;
}

On its own, margin: auto can't center vertically, except inside flex or grid, where margin: auto on a child centers it on that axis too.

/* vertical centering via flex + margin auto, no justify/align needed */
.parent { display: flex; }
.child  { margin: auto; }

margin: auto

6. Text Align

Inline children

one two three

.parent { text-align: center; }
.child  { display: inline-block; }

Line-height trick (single line, vertical)

centered text

/* single-line vertical center, brittle for wrapping text */
.parent {
  height: 80px;
  line-height: 80px; /* = height */
  text-align: center;
}

Gotcha: The line-height trick breaks on multi-line text, since each line spreads out to 80px apart. Use it only for single-line labels. Prefer flex or grid for anything real.

Cheat sheet

Method	Use case	Needs fixed size?	Needs height?
Flexbox	Default for everything	No	For vertical
Grid	Single child or grid layout	No	For vertical
Absolute + Transform	Overlay or exact center over parent	No	Yes (parent)
Absolute + Inset + margin	Modal with known or fit-content size	Yes (or fit-content)	Yes (parent)
Margin auto	Horizontal block centering	Yes (width less than parent)	No (horizontal only)
Text-align	Inline or text children	No	Line-height hack for single line

Rule of thumb: New project, use Flexbox. Already using Grid, use place-items: center. Modal, use Absolute + Inset. Horizontal block, use margin: auto. Text, use text-align.

Prev6: The Box Model Next8: Display, Flow & Why Inline Feels Broken