How to Center a Div in CSS: Every Method Explained

Flexbox Centering (recommended)

Flexbox is the best general-purpose centering solution. It works on the parent container and centres the child element both horizontally and vertically regardless of size.

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

This is a two-axis solution. justify-content distributes space along the main axis (horizontal when flex-direction: row). align-items aligns items on the cross axis (vertical when flex-direction: row). Apply both to the parent and the child centres perfectly every time.

CSS Grid Centering

CSS Grid offers an even more concise centering syntax using the place-items shorthand, which combines align-items and justify-items.

.parent {
  display: grid;
  place-items: center; /* shorthand for both axes */
  min-height: 100vh;
}

/* Or explicitly: */
.parent {
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 100vh;
}

place-items: center is the shortest CSS centering solution that exists. It works in all modern browsers (Chrome 57+, Firefox 52+, Safari 10.1+) and is perfect for single-child centring.

Absolute Positioning + Transform

This method positions a child relative to a positioned parent using top: 50%; left: 50% and then corrects the offset with transform: translate(-50%, -50%).

.parent {
  position: relative;
  min-height: 300px;
}

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

This works by first placing the child's top-left corner at the centre of the parent, then the translate(-50%, -50%) shifts the element back by half its own width and height, achieving true centering. Useful when you cannot use Flexbox or Grid on the parent (for example, inside a third-party component with locked styles).

Horizontal Only: margin auto

For block elements with a defined width, margin: 0 auto centres them horizontally. This is the classic pre-Flexbox approach and still perfectly valid for centring a content column.

.content {
  width: 780px;         /* or max-width */
  max-width: 100%;
  margin: 0 auto;       /* centres horizontally */
}

This does not centre vertically — it only works horizontally on block-level elements with an explicit width. It is the standard way to centre a page container or article content within a wide viewport.

Inline Elements: text-align

For inline content (text, inline-block elements, images), text-align: center on the parent centres children horizontally.

.parent {
  text-align: center; /* centres inline and inline-block children */
}

/* Force a block to be inline-block so text-align works: */
.child {
  display: inline-block;
  text-align: left; /* reset text alignment inside */
}

Method Comparison

How to Build Centred Layouts with CSSTools.io

The CSSTools.io Flexbox Generator lets you experiment with all of these alignment properties visually and see how they interact with different numbers of child items — before you write a single line of code.