How to Center a Div in CSS (5 Ways That Actually Work)

The Fastest Way to Center a Div

To center a <div> both horizontally and vertically, give its parent three lines:

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

That's it. The child element sits dead center, no fixed widths, no magic numbers, no negative margins. Flexbox is the right answer roughly 90% of the time, and it works in every browser you care about in 2026.

But "center a div" hides several different problems: center only horizontally, center a single item, center a whole grid of items, or center something that has to sit on top of other content. Below are five techniques that each actually work, when to reach for each, and the pitfalls that trip people up.

Quick Comparison: Which Method to Use

If you only remember one thing: Flexbox for a single child, Grid for a container of children, margin: auto when you just need horizontal.

Method 1: margin: 0 auto (Horizontal Only)

The oldest trick still works for the most common case: a block-level element that needs to sit in the middle of the page horizontally.

.box {
  width: 600px;      /* a width is REQUIRED */
  max-width: 100%;   /* so it stays responsive */
  margin: 0 auto;    /* 0 top/bottom, auto left/right */
}

The browser splits the leftover horizontal space equally between the left and right margins. Two things break it:

• No width set. A block element defaults to width: 100%, so there is no leftover space to distribute and nothing appears to move. Always give it a width or max-width.
• It only centers horizontally. margin: auto does nothing vertically in normal flow. For vertical centering you need Flexbox, Grid, or the transform trick.

Understanding why a width is required comes down to the CSS box model — how content, padding, border, and margin combine to size an element.

Method 2: text-align: center (Inline Content)

Reach for this when the thing you're centering is text, an image, or any inline/inline-block element. Set it on the parent, not the child.

.parent {
  text-align: center;
}

This centers inline content inside the parent. A common gotcha: it does not center a block-level child like a <div> with a set width — for that, use margin: auto or Flexbox. But if you set the child to display: inline-block, text-align: center on the parent will center it horizontally.

Method 3: Flexbox (Both Axes, Recommended)

Flexbox is the modern default for centering because it handles both axes with no measurements and adapts to any content size.

.parent {
  display: flex;
  justify-content: center; /* main axis: horizontal by default */
  align-items: center;     /* cross axis: vertical by default */
  min-height: 100vh;       /* give the parent height to center within */
}

The one detail people miss: the parent needs a height for vertical centering to be visible. If the parent is only as tall as its content, there's no vertical space to distribute. min-height, a fixed height, or an inherited height all work.

To center just horizontally, drop align-items. To center just vertically, drop justify-content. Because justify-content follows the main axis, it flips to vertical if you set flex-direction: column — worth knowing before you swap the two properties in confusion. For the full property-by-property breakdown, see our complete guide to Flexbox.

Centering a row of items

Flexbox also centers multiple children as a group, with even spacing:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem; /* space between items */
}

Method 4: CSS Grid with place-items

Grid gives you the shortest centering syntax in all of CSS. place-items is shorthand for align-items and justify-items at once.

.parent {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

Two lines center any single child on both axes. This is the cleanest option when the parent is a dedicated container — a hero section, an empty state, a loading spinner. It's supported in every modern browser. If you're already building your layout with columns and rows, lean on Grid here; our CSS Grid tutorial walks through a full responsive build.

Use place-content: center instead if you want to center the entire grid track group rather than items within their cells.

Method 5: Absolute Positioning + transform

When the element has to sit on top of other content — a modal, a tooltip, a badge — and you don't know its exact size, absolute positioning with a transform is the reliable choice.

.parent {
  position: relative; /* establishes the positioning context */
}

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

Here's the clever part. top: 50% and left: 50% push the element's top-left corner to the center, which looks off-center. translate(-50%, -50%) then pulls it back by half its own width and height — and because percentages in transform refer to the element itself, you never need to know its dimensions. It self-corrects at any size.

The only requirement: the parent must have position: relative (or any non-static position), or the child will position itself against the viewport instead.

Bonus: A Reusable Sass Centering Mixin

If you center elements all over a project, wrap the Flexbox pattern in a Sass mixin so you write it once and reuse it everywhere. This keeps your stylesheet DRY and lets you tweak the behavior in a single place.

@mixin center($direction: both) {
  display: flex;

  @if $direction == both {
    justify-content: center;
    align-items: center;
  } @else if $direction == horizontal {
    justify-content: center;
  } @else if $direction == vertical {
    align-items: center;
  }
}

// Usage
.hero {
  min-height: 100vh;
  @include center;             // both axes
}

.toolbar {
  @include center(horizontal); // horizontal only
}

The @if / @else if branches let one mixin cover every centering case with an argument. That's the kind of small abstraction that makes a large codebase easier to maintain — the same reasoning behind reusable spacing and typography helpers.

Common Centering Mistakes

• Vertical centering does nothing. Almost always the parent has no height. Add min-height or a fixed height.
• margin: auto isn't working. The block element has no width set, so there's no free space to distribute.
• The whole page scrolls sideways after using 100vw. 100vw includes the scrollbar width. Prefer 100% or min-height: 100vh on a full-height wrapper.
• justify-content and align-items seem swapped. You changed flex-direction. The main axis moved, so the properties follow it.
• Absolute element jumps to a corner of the screen. The nearest ancestor isn't positioned. Add position: relative to the intended parent.

Which Method Should You Actually Use?

For 2026, here's the honest default order:

1. One item, both axes? Flexbox (display: flex + justify-content + align-items) or Grid place-items: center.
2. A whole container? Grid — place-items: center is the least code.
3. Just horizontal, block element? margin: 0 auto with a width.
4. Text or inline? text-align: center on the parent.
5. Overlay of unknown size? Absolute positioning + translate(-50%, -50%).

The old hacks — table-cell display, negative margins with fixed pixels, ghost-element vertical-align tricks — are no longer necessary. Flexbox and Grid solved centering for good, and both have near-universal support. Pick based on whether you're centering an item (Flexbox) or a container (Grid), and you'll rarely go wrong.