How to Center Anything in CSS: 10 Modern Techniques

“How do I center a div?” is one of the most-searched CSS questions there is, and it’s a running joke in web development for a reason: CSS never had one single “center this” command. Instead it grew several different tools over the years — some for centering text, some for centering a whole block, some for centering something whose size you don’t even know yet — and picking the wrong one is exactly why centering has a reputation for being harder than it should be. The good news: once you know which tool matches which situation, centering anything becomes automatic. This post walks through ten real techniques, from the one-liner you’ll use constantly to the legacy trick you’ll only need once in a while, so you always reach for the right one.

Every demo below is live and editable right here in the article — nothing to install. Each one also has a Fork & Edit button that opens the exact code, already running, in My Code — webdevpuneet’s free in-browser editor. Change a value, hit save, and watch what breaks (or doesn’t) — that’s the fastest way to actually understand centering, faster than reading about it.

New to CSS in general? The CSS Playground is a free, click-based, in-browser course that runs beginner to pro across 53 lessons in 18 chapters — including a dedicated Flexbox chapter and a Grid chapter that cover everything this post uses, one guided step at a time.

Why “just center it” was never that simple

The core confusion is that CSS treats three different things as three different problems: centering text or inline content inside a box, centering a block-level box itself inside its parent, and centering a group of items along one or two axes at once. A property that solves one of those does nothing for the other two — text-align: center, for instance, is a complete no-op on the block-level div itself, which is the single most common centering mistake beginners make. The ten techniques below are grouped roughly in the order you’ll actually reach for them, starting with the simplest case and building up to full two-axis centering and the trickier “I don’t know this element’s size” scenarios.

1. text-align: center

The simplest one, and the one people misuse most: this centers inline content — text, inline images, inline-block elements — horizontally inside its containing block. It does nothing to the block itself.

The rule:

.box { text-align: center; }

text-align is inherited and only ever affects how inline-level content lines up inside whatever box it’s set on — text, an <img>, a <button> or any element with display: inline/inline-block. It has zero effect on the block box carrying the property itself; that box still sits exactly where normal block layout puts it. This is the single most common beginner mix-up: setting text-align: center on a div and expecting the div to move.

Best for: centering text, an inline image, or an inline-block button inside a card, paragraph, or heading. Tip: if you set this expecting a whole block-level div to move and nothing happens, that’s not a bug — you want technique #2 or #3 below instead.

2. margin: 0 auto

The classic way to horizontally center a block-level box that already has an explicit width. Still completely valid CSS, and still everywhere in real codebases.

The rule:

.box { width: 260px; margin: 0 auto; }

This only works because the box has a width narrower than its parent — that’s what leaves leftover horizontal space for auto margins to split evenly between the left and right sides. Without an explicit (or constrained) width, a block-level element already stretches to fill its parent’s full width, leaving no leftover space to distribute, so margin: 0 auto would visibly do nothing. It’s also horizontal-only: the same trick does not vertically center a block, because normal block layout doesn’t give auto top/bottom margins the same “split remaining space” behavior.

Best for: centering a fixed-width or max-width content column, card, or modal horizontally on the page — the classic “centered container” layout. Tip: pair it with max-width instead of a fixed width for a column that centers itself and also shrinks gracefully on narrow screens.

3. Flexbox centering

The modern default for centering on both axes at once, and the technique worth reaching for first in most new code.

The rule:

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

Both properties live on the parent, not the centered child — a mix-up that trips up almost everyone the first time. justify-content aligns children along flexbox’s main axis (horizontal by default), and align-items aligns them along the cross axis (vertical by default) — together they land any number of children dead-center on both axes, regardless of whether their size is known ahead of time. Add height: 100vh (or any explicit height) to the parent and this centers content in the full viewport, which is exactly how most “centered loading spinner” or “centered hero” layouts are built today.

Best for: centering one element (or a row of several) inside a container of any size, especially when you don’t know the content’s dimensions ahead of time. Tip: if you only need to center on one axis, you only need one of the two properties — don’t add both out of habit if you only want horizontal or only vertical centering.

4. CSS Grid place-items: center

Grid’s one-line equivalent of flexbox’s two properties — genuinely just this one declaration.

The rule:

.parent {
  display: grid;
  place-items: center;
}

place-items is shorthand for align-items (vertical) plus justify-items (horizontal) in one property — Grid’s version of the same two axes flexbox needs two separate properties for. For the single-child centering case that demo #3 shows, this is the shortest correct answer in all of CSS. Grid and flexbox overlap heavily for this one job; picking between them mostly comes down to whether the rest of that layout is already a grid or already a flex container.

Best for: centering a single child (or every item in a multi-item grid, each within its own cell) with the least code possible. Tip: place-items: center centers content within each grid track/cell — if the grid’s own tracks are smaller than the container and you want the whole grid centered as a block, that’s place-content, demo #5 next.

5. CSS Grid place-content: center

Easy to confuse with #4, and genuinely solving a different problem: this centers the grid’s own tracks as a block, not just content within them.

The rule:

.grid {
  display: grid;
  grid-template-columns: repeat(2, 70px);
  place-content: center;
}

When a grid’s tracks (its rows and columns) add up to less width and height than the grid container actually has — because the columns have a fixed size, as in this demo’s repeat(2, 70px) — there’s leftover space around the whole grid, not inside each cell. place-items has no effect on that leftover space; place-content is what centers the tracks themselves within it. The distinction only matters when the grid’s total size is smaller than its container; if the grid stretches to fill the container completely, place-content has no leftover space to act on, so only place-items (centering each item inside its own cell) still makes a visible difference.

Best for: centering a fixed-size grid of items (a small photo grid, an icon grid, a calendar) inside a larger, differently-sized container. Tip: if changing place-items to place-content (or back) doesn’t visibly change anything in your own layout, your grid’s tracks are already exactly filling the container — there’s no leftover space for either property to distribute.

6. Absolute positioning + transform

The reach-for-it technique when an element needs to sit centered over something else — a modal, a tooltip, an overlay badge — independent of normal document flow.

The rule:

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

top: 50%; left: 50%; alone only moves the box’s top-left corner to the parent’s center — the box itself still hangs off to the bottom-right, not centered at all. transform: translate(-50%, -50%) is the fix: it shifts the box back by exactly half of its own width and height, which is what actually lands its center on that point. This is the one technique on this list that doesn’t need to know the box’s size in advance, since the percentage in translate() is relative to the element itself, not its parent. The parent needs position: relative (or any non-static position) so the absolutely positioned child measures its percentages against that parent, not the whole page.

Best for: centering an overlay, modal, or badge on top of other content, especially when the centered element’s exact size isn’t fixed. Tip: forgetting position: relative on the parent is the most common bug with this technique — the box will still center itself, just against the nearest positioned ancestor further up the page, or the initial containing block (effectively the whole viewport) if there isn’t one, which usually isn’t what you meant.

7. Absolute positioning + inset + margin: auto

The same “centered overlay” goal as #6, but for when you already know the exact size — no transform required.

The rule:

.parent { position: relative; }
.box {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 160px;
  height: 70px;
}

inset: 0 is shorthand for pinning all four sides (top, right, bottom, left) to 0 — which, combined with an explicit smaller width and height, leaves equal leftover space on every side. margin: auto then splits that leftover space evenly in all four directions, the same “auto absorbs remaining space” behavior technique #2 uses, just applied on all four sides at once instead of only left/right. Because this relies on a fixed size rather than a transform, it’s arguably more predictable when you already know the box’s dimensions — but it can’t center something whose size isn’t set, which is exactly where #6’s transform approach wins instead.

Best for: centering a fixed-size overlay, dialog, or panel when you already know its exact width and height. Tip: if you omit either width or height, the box stretches to fill the full inset: 0 box instead of centering at a smaller size — both dimensions need to be explicitly constrained for this one to work.

8. width: fit-content + margin-inline: auto

A modern one-two combo for a block that should shrink-wrap tightly to its own content, then center that shrunk box.

The rule:

.box {
  width: fit-content;
  margin-inline: auto;
}

Recall technique #2 needed a fixed pixel width to leave room for auto margins to work with. width: fit-content solves that without hardcoding a number: the box shrinks to exactly as wide as its content needs, whatever that turns out to be, and margin-inline: auto (the modern logical-property spelling of “left and right margins”) then centers that shrunk box the same way #2 does. margin-inline also has a real advantage over plain margin: 0 auto in a right-to-left layout: it centers along the correct reading-direction axis automatically, where a plain left/right margin would need manual swapping.

Best for: a badge, pill, tag, or callout box whose width should hug its own text rather than stretch full-width, while still sitting centered on the page. Tip: pair with max-width too if the content could occasionally be long enough to need wrapping — fit-content alone will happily grow as wide as a single unbroken line demands.

9. Centering a stack of items

The real-world version of flexbox centering: not just one element, but an entire vertical stack — icon, heading, paragraph, button — centered together as a unit on both axes.

The rule:

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

flex-direction: column is the detail that makes this different from technique #3: it flips flexbox’s main axis to vertical, which swaps what justify-content and align-items each control — justify-content now centers along the vertical stack direction, and align-items now centers each item horizontally instead. gap replaces the old trick of adding margin to every child except the last one, spacing the stacked items evenly without any per-child overrides. This exact pattern — a centered icon-heading-text-button column — is one of the most common real UI blocks on the web: empty states, pricing cards, onboarding screens, and feature callouts almost all boil down to this.

Best for: empty states, pricing cards, onboarding panels, and any “centered content block” made of several stacked pieces rather than one element. Tip: switching flex-direction between row and column is a fast way to remember which flex property does what — justify-content always follows the direction you just set, align-items always runs perpendicular to it.

10. display: table-cell centering

The pre-flexbox way to vertically center content, from back when that alone was a genuinely hard problem in CSS. Rarely the best choice today, but still worth recognizing.

The rule:

.stage { display: table; }
.cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Before flexbox existed (and it only became reliably usable across browsers in the mid-2010s), vertical-align: middle was the one property that could vertically center content — but only inside something behaving like a table cell, since vertical-align has no effect on ordinary block boxes at all. Setting display: table-cell on a plain div was the workaround: it makes that div participate in table-style layout without writing a single actual <table> tag. It’s genuinely obsolete for new layout code now that flexbox and grid exist and are simpler, but it still surfaces in two real places: legacy codebases that predate 2015, and HTML email templates, where flexbox and grid support across email clients remains unreliable enough that table-cell centering is still the safe, boring choice professionals actually reach for.

Best for: maintaining older CSS that already uses this pattern, and HTML email design, where flexbox/grid support is still inconsistent across mail clients. Tip: if you’re writing brand-new layout CSS for a website in 2026, reach for flexbox or grid instead — this technique’s only real home left is legacy code and email.

Common pitfalls

• Using text-align: center and expecting a block-level div to move. It only affects inline content inside the box, never the block box itself — that’s what technique #1 above explains, and it’s the single most common centering confusion.
• Putting flexbox’s centering properties on the wrong element. justify-content and align-items belong on the parent (the flex container), not the child being centered — a mistake that produces exactly zero visible effect and no error to point you at the problem.
• Forgetting position: relative on the parent before absolutely positioning a child. The child will still center itself against some ancestor — just whichever positioned one it finds first walking up the DOM, which is very often not the parent you meant.
• margin: 0 auto doing nothing because the box has no width constraint. A block element with no explicit width already fills its parent, leaving no leftover space for auto margins to distribute — add a width or max-width first.
• Reaching for display: table-cell in new code out of habit. It solved real problems before flexbox existed, but flexbox and grid do the same job with less code and fewer surprises in every context except HTML email.

Frequently asked questions

What’s the single best way to center something in CSS in 2026?

For most everyday cases — one element, or a small stack of them, on one or both axes — flexbox (display: flex with justify-content and align-items) is the most broadly useful default, exactly what demos #3 and #9 show. Grid’s place-items: center is an equally valid, even shorter alternative when the surrounding layout is already grid-based. And one newer option is worth knowing: align-content: center now works on a plain block container (Chrome 123+, Firefox 125+, Safari 17.4+), vertically centering its content with no flex or grid at all.

Why doesn’t margin: auto center something vertically the way it centers horizontally?

In normal block flow, a block element already stretches to its parent’s full width by default, so a narrower fixed width leaves real leftover horizontal space for margin: 0 auto to split. Height doesn’t work the same way — a block’s height is determined by its content, not stretched to fill its parent by default — so there’s usually no leftover vertical space for an auto margin to distribute unless the parent has an explicit height and something else (like absolute positioning, as in technique #7) sets up that relationship deliberately.

Do I need to know an element’s exact size to center it?

No — flexbox (#3), grid’s place-items (#4), and the transform-based absolute positioning technique (#6) all center content correctly whether or not its size is known ahead of time. Only the margin: auto-based techniques (#2, #7, #8) rely on the element having some size constraint (a fixed width, or an inset box) to create the leftover space those margins distribute.

Is CSS Grid or Flexbox better for centering?

For centering specifically, they’re close to interchangeable — place-items: center on a grid container is genuinely shorter than the two flexbox properties it replaces. The real decision usually isn’t about centering at all: pick whichever one the rest of that layout already needs (grid for two-dimensional row-and-column layouts, flexbox for one-dimensional rows or columns), and use its centering shorthand for free.

Why is display: table-cell still worth knowing if it’s outdated?

Because it hasn’t fully disappeared: HTML email design still leans on it, since flexbox and grid support across email clients (particularly older versions of Outlook) remains unreliable enough that professional email templates still often use table-based layout, vertical-align: middle included, as the dependable choice.

Every demo above ships its full HTML, CSS and JS in the HTML / CSS / JS tabs in its own top bar. The fastest way to actually lock this in is to click Fork & Edit on demo #3, delete align-items: center, and watch the box stretch to fill the full height instead of staying its own size — flexbox’s default cross-axis alignment is stretch, not “leave it alone.” Add the property back and it returns to dead-center at its natural size. Once you’ve got a version you like, save it to My Code and it’s yours to keep, tweak further, or drop straight into a real project.

Recommended next step: open the CSS Playground and work through its Flexbox and Grid chapters — free, click-based lessons that cover exactly the layout systems this post’s best techniques are built on. For more tutorials like this one, browse the CSS category on the blog.