How to Center a Div in CSS (5 Modern Ways for 2026)

"How do I center a div?" — it's the most-Googled CSS question of all time. Generations of developers have struggled with it. The good news: in 2026, centering a div takes one or two lines of CSS. The hard part is knowing which method to use and when.

This guide covers the five reliable ways to center a div, when each one shines, and the gotchas you'll hit if you pick the wrong tool. Every example works in all modern browsers — Chrome, Firefox, Safari, Edge.

Quick Answer

Use Flexbox. On the parent, set display: flex; justify-content: center; align-items: center; — that's it. Works for centering a div both horizontally and vertically, in 2 lines of CSS, with universal browser support.

If your parent doesn't have a height, add min-height: 100vh (full viewport height) so vertical centering has space to work.

Method 1: Flexbox — The Universal Answer

Flexbox was designed exactly for this. It's the simplest, most reliable, and most flexible way to center anything in CSS.

HTML

<div class="parent">
  <div class="child">Centered!</div>
</div>

CSS

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

When to use it: 90% of the time. Centering a button on a page, a modal in a viewport, an icon in a card — Flexbox handles it all.

Gotcha: Flexbox affects all direct children of .parent. If you have multiple children and only want to center one, wrap that child in another flex container or use margin: auto on just that child within the flex parent.

Method 2: CSS Grid — Even Shorter

If Flexbox feels like two lines too many, CSS Grid does it in one with place-items:

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

place-items: center is shorthand for align-items: center + justify-items: center. It's the most concise centering syntax in modern CSS.

When to use it: when you literally have one child to center, or when you're already using Grid for layout. For complex 2D layouts that aren't just "one centered thing", Grid's full power shines.

Want to learn Grid properly? Our CSS Grid lesson walks through the entire grid system step-by-step.

Method 3: Absolute Positioning + Transform

The classic pre-Flexbox technique, still useful today when the centered element needs to sit on top of other content (modals, tooltips, popups).

.parent {
  position: relative;     /* anchor for the child */
  height: 100vh;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

How it works: top: 50% moves the child's top edge to the parent's center. transform: translate(-50%, -50%) then shifts the child back by half its own size, which lands it perfectly centered.

When to use it: overlays, modals, tooltips, anything that needs to float above other content. Don't use it for general layout — it removes the element from normal flow and can cause headaches with responsive design.

Method 4: Margin Auto (Horizontal Only)

The OG centering technique. Works for horizontal centering of any block element with a defined width:

.child {
  width: 300px;          /* must have a width */
  margin: 0 auto;        /* top/bottom 0, left/right auto */
}

Catch: this only does horizontal. For vertical centering you need a flex or grid parent (in which case use Methods 1 or 2 instead).

When to use it: centering a fixed-width container (like a 1200px page wrapper) inside the body. It's still the cleanest pattern for that specific case.

Method 5: text-align + line-height (Inline / Text)

For centering inline content like text, icons, or inline-block elements, this old trick still works:

.parent {
  text-align: center;     /* horizontal */
  line-height: 200px;     /* vertical: match parent height */
  height: 200px;
}
.child {
  display: inline-block;
  line-height: normal;    /* reset for the child's own text */
  vertical-align: middle;
}

When to use it: single-line text centered in a fixed-height container — like a button label or a badge. For anything else, use Flexbox.

Gotcha: line-height equals height only works for single-line content. Multi-line breaks the illusion.

Comparison: Which Method to Use?

The rule of thumb:

• Centering one thing? Grid place-items: center.
• Centering multiple things or in a layout? Flexbox.
• Modal / overlay floating on top? Absolute + transform.
• Page wrapper with a max-width? Margin auto.

5 Common Centering Mistakes

1. Forgetting min-height on the parent

Flexbox can't center vertically if the parent has zero height. Always give the parent a height — usually min-height: 100vh for full-page centering or min-height: 400px for a section.

2. Using margin: auto without a width

Without an explicit width, the element fills 100% of the parent and there's no margin space to auto-distribute. Always pair margin: 0 auto with width.

3. Forgetting position: relative on the parent for absolute centering

An absolutely positioned child anchors to the nearest positioned ancestor. If the parent isn't position: relative, the child centers against the document — almost never what you want.

4. Centering inline elements with margin auto

margin: auto only works on block-level elements. <span>, <a>, and other inline elements ignore it. Either change them to display: block or use text-align: center on the parent.

5. Stacking centering methods unnecessarily

If you've got Flexbox on the parent, you don't also need margin: auto or text-align: center on the child. Pick one method and trust it.

Frequently Asked Questions

Related Reading

The Bottom Line

Centering a div in 2026 is a solved problem. Use Flexbox for almost everything. Use Grid place-items: center when you have exactly one child. Use absolute + transform for modals and overlays. Use margin auto for fixed-width page wrappers.

The other methods are good to know — you'll meet them in legacy codebases — but you'll rarely reach for them in new code.

Now you know every reliable way to center a div. The next time someone asks "how do I center a div?" — you've got the answer.