How to Center a Div with Flexbox

Overview

Centering an element both horizontally and vertically inside its parent used to be one of the fiddliest tasks in CSS. With Flexbox it takes three lines on the parent — no magic numbers, no negative margins, no knowing the child's size in advance. This is the modern, recommended way to center a div, and it works whatever the content is.

Steps

1. Make the parent a flex container with display:flex

Centering with Flexbox is done on the parent, not the child. Set display: flex on the container that holds the element you want to center. On its own this lays the children out in a row; the next two steps move that row to the middle. Give the container a height so there is vertical room to center into — otherwise it collapses to the child's height and vertical centering has nothing to work with.

.parent {
  display: flex;
  height: 300px;
}

2. Center on the main axis with justify-content:center

justify-content distributes items along the main axis, which is horizontal in a default row. Setting it to center groups the child in the horizontal middle, with equal free space on the left and right. That handles horizontal centering.

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

3. Center on the cross axis with align-items:center

align-items positions items along the cross axis, which is vertical in a default row. Setting it to center places the child on the vertical middle. With both properties in place the child is centered on both axes at once — horizontally by justify-content and vertically by align-items. That is the whole technique.

.parent {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

Runnable example

The complete, rendering version — a box centered on both axes inside its parent:

The same three lines center anything the parent contains. Here they center a card that itself holds a heading and a line of text — the child's internal layout is untouched, only its position in the parent changes:

For a hero or splash screen, swap the fixed height for min-height: 100vh so the flex container fills the whole viewport and centers its child in the middle of the screen:

The technique is not limited to boxes — it centers a single line of text or an inline image just as well, since Flexbox positions whatever child it is given:

/* center a headline in a banner */
.banner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  text-align: center;
}

/* the whole group can be nudged as one:
   center vertically, but keep text left-aligned */
.parent {
  display: flex;
  align-items: center;      /* vertical centering */
  justify-content: flex-start;
  height: 300px;
}

Common pitfalls

If you need to center several children as a group, the same three lines still work — they center the whole row of items together. To center them and also space them out, keep align-items: center and swap justify-content for space-between or space-around. And if a single child should escape the centering while its siblings stay put, override it on that one item with align-self rather than changing the container.

Frequently asked questions

How do I center a div horizontally only?

Set display: flex and justify-content: center on the parent. That centers the child on the main (horizontal) axis without touching its vertical position.

Why is my div centered horizontally but not vertically?

The flex container has no extra vertical space. Give the parent a height (or min-height) so align-items: center has room to center the child within.

Do these properties go on the parent or the child?

On the parent. display: flex, justify-content, and align-items are set on the container; they position the container's children, including the div you want centered.