How do you center a div both horizontally and vertically
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.
"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)
.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)
.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)
.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
.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: centerfor 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.