How do you center a div both horizontally and vertically in modern CSS?

The modern answer is Flexbox (display:flex; justify-content:center; align-items:center) or Grid (display:grid; place-items:center) on the parent. Older/edge approaches: absolute + transform translate(-50%,-50%), or margin:auto inside a flex/grid container. Know which works without knowing the element's size.

3 min read·~5 min to think through

"Center a div" is the classic CSS warm-up. The modern answer is Flexbox or Grid; know a couple of others and why they differ.

Flexbox (the go-to)

css

.parent {
  display: flex;
  justify-content: center;  /* main axis — horizontal by default */
  align-items: center;      /* cross axis — vertical */
}

Works regardless of the child's size, content, or count. The everyday answer.

Grid (the shortest)

css

.parent {
  display: grid;
  place-items: center;      /* centers on both axes in one line */
}

place-items: center is the most concise modern centering.

Absolute + transform (when you can't use fl/grid)

css

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

The top/left: 50% positions the child's top-left corner at the center; translate(-50%, -50%) pulls it back by half its own size — so it works without knowing the child's dimensions. Useful for overlays/modals.

margin: auto inside flex/grid

css

.parent { display: flex; }
.child  { margin: auto; }   /* auto margins absorb space on all sides */

In a flex/grid container, margin: auto centers on both axes. (Plain margin: 0 auto only centers horizontally and only for block elements with a defined width.)

What interviewers are really checking

Do you reach for Flexbox/Grid (modern) or old hacks?
Do you know horizontal-only (margin: 0 auto, text-align: center for inline content) vs both axes?
Do you know which methods need the element's size known vs not? (transform method doesn't; negative-margin method does.)

The framing

"Modern answer: Flexbox on the parent — justify-content: center and align-items: center — or Grid with place-items: center, which is the shortest. Both work without knowing the child's size. When I can't restructure the parent, absolute positioning with top/left: 50% plus transform: translate(-50%, -50%) centers it relative to its own size — good for modals. And margin: auto inside a flex container also does both axes. The thing to be precise about is horizontal-only versus both, and which methods need the element's dimensions."

Follow-up questions

•Why does transform: translate(-50%, -50%) work without knowing the element's size?
•What's the difference between justify-content and align-items?
•How do you center inline content vs a block element?
•When would you still use the absolute-positioning method?

Common mistakes

•Reaching for old hacks instead of Flexbox/Grid.
•Using margin: 0 auto and expecting vertical centering too.
•Forgetting the parent needs position: relative for the absolute method.
•Using top/left: 50% without the translate correction.

Performance considerations

•All methods are cheap. transform-based centering can be GPU-composited and is animation-friendly; layout-based centering (flex/grid) recalculates on resize but that's negligible.

Edge cases

•Child larger than the parent — content overflows.
•Centering when the child's size is unknown/dynamic.
•Centering multiple children vs one.
•Inline vs block vs replaced elements behave differently.

Real-world examples

•Centering a modal/dialog over a backdrop.
•Centering a loading spinner or empty-state message in a container.

Senior engineer discussion

Seniors give Flexbox/Grid first, can produce 2–3 methods, explain why the transform method is size-agnostic, and distinguish horizontal-only from both-axis centering and which approaches need known dimensions.