How to Center a Div in CSS — All Methods Explained

Table of Contents

Quick Answer (Modern Way)
Horizontal Centering
Vertical Centering
Flexbox — Center Both Axes
CSS Grid — Center Both Axes
Absolute Positioning
Centering Text vs Centering a Box
Which Method Should You Use?

Quick Answer (Modern Way)

If you just need the answer right now — here are the two best modern approaches:

/* METHOD 1 — Flexbox (most common) */
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* METHOD 2 — CSS Grid (even shorter) */
.parent {
  display: grid;
  place-items: center;
}

Live demo — div centered in parent

Centered!

Best practice 2026: Use Flexbox for 1D centering (a row or column) and Grid for 2D centering (both axes at once). Both have excellent browser support.

Horizontal Centering

Block element — margin auto

The classic way to horizontally center a block element with a known width:

.box {
  width: 300px;      /* must have a width */
  margin: 0 auto;    /* left and right margins become equal */
}

/* Or shorthand: top-bottom | left-right */
.box { margin: 2rem auto; }

margin: auto only works horizontally for block elements. It has no effect on vertical centering in normal flow.

Inline / inline-block element — text-align

.parent {
  text-align: center;
}

/* Centers inline, inline-block, and inline-flex children */
.child {
  display: inline-block;
}

Flexbox horizontal only

.parent {
  display: flex;
  justify-content: center; /* horizontal axis */
}

Vertical Centering

Vertical centering used to require hacks. Modern CSS makes it straightforward.

Flexbox vertical only

.parent {
  display: flex;
  align-items: center; /* vertical axis */
  min-height: 200px;   /* parent needs height */
}

line-height trick (single line text)

.parent {
  height: 60px;
  line-height: 60px; /* same as height */
  text-align: center;
}

The line-height trick only works for single-line text. It breaks on multi-line content.

Flexbox — Center Both Axes

Flexbox is the most versatile centering tool. It centers the child regardless of its size.

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

/* The child doesn't need any special CSS */
.child {
  padding: 2rem;
  background: #6d28d9;
  color: #fff;
}

You can also center multiple children in a row:

.row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* This centers all child cards horizontally and vertically */

CSS Grid — Center Both Axes

Grid's place-items is the shortest centering solution — one line replaces two Flexbox lines.

/* Shorthand for align-items + justify-items */
.parent {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

/* Or be explicit */
.parent {
  display: grid;
  align-items: center;
  justify-items: center;
}

To center a single item without affecting layout of siblings:

.parent {
  display: grid;
}

.child {
  place-self: center; /* centers this specific child only */
}

Absolute Positioning

Use this when the child must be removed from normal document flow (overlays, modals, badges).

The classic transform trick

.parent {
  position: relative; /* required for absolute children */
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* translate(-50%, -50%) shifts back by half the child's own width/height */
}

Inset 0 + margin auto (modern)

.child {
  position: absolute;
  inset: 0;           /* shorthand for top:0;right:0;bottom:0;left:0 */
  margin: auto;
  width: fit-content;
  height: fit-content;
}

The inset: 0; margin: auto; pattern works in all modern browsers and is cleaner than the transform hack because you don't need to know the child's dimensions.

Centering Text vs Centering a Box

These are two different things. Make sure you know which one you need:

Goal	CSS	Applied to
Center inline text	`text-align: center`	The parent container
Center a block div horizontally	`margin: 0 auto` (with fixed width)	The div itself
Center div inside parent	`display: flex; justify-content: center; align-items: center;`	The parent
Center text vertically in a div	`display: flex; align-items: center;`	The div
Center in full viewport	`min-height: 100vh; display: grid; place-items: center;`	The parent

Which Method Should You Use?

Situation	Best Method
Center a card/section on the page (horizontal only)	`max-width + margin: auto`
Center items in a navbar	Flexbox `align-items: center`
Full-screen hero section	Flexbox or Grid with `min-height: 100vh`
Modal / overlay centered on screen	Absolute positioning + `transform: translate(-50%, -50%)`
Center single element, unknown size	Grid `place-items: center`
Center multiple cards in a row	Flexbox with `justify-content: center`
Center text inside a button	Flexbox `align-items + justify-content`

General rule: Prefer Flexbox for most UI patterns. Use Grid's place-items for simple full-page or card centering. Use absolute positioning only when the element needs to be out of normal flow.