Detailed explanation
To center a div horizontally and vertically, apply the centering rules to its parent. Flexbox is a common choice: `.parent { display: flex; justify-content: center; align-items: center; min-height: 100vh; }`. The child becomes a flex item, and the parent distributes available space around it. This is useful for login panels, loading indicators, and empty-state messages. The important starting point is deciding whether you are centering within the viewport or within a particular container; the parent's dimensions define that area.
Under Flexbox's default `flex-direction: row`, `justify-content: center` centers items along the horizontal main axis, while `align-items: center` centers them along the vertical cross axis. If you change the direction to `column`, those axis mappings swap, although using both properties still centers a single child. Vertical centering needs available vertical space: a parent whose height simply matches its child's height has no extra space to distribute. `min-height: 100vh` provides a viewport-height minimum while allowing growth. For a panel, use an appropriate container height instead; on mobile, `100dvh` can track the changing visible viewport.
CSS Grid offers a concise alternative: `.parent { display: grid; place-items: center; min-height: 100vh; }`. The `place-items` shorthand sets both `align-items` and `justify-items`, aligning the child within its grid area along the block and inline axes. For a single child in a simple grid, this achieves the same visual result as the Flexbox example. With multiple children, however, Grid may place them in separate cells, so this does not necessarily center them together as one group.
An older alternative uses `.parent { position: relative; }` and `.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }`. The offsets place the child's origin halfway across the containing block, and the transform shifts it back by half its own size. This works without knowing the child's dimensions, but removes it from normal flow. Interviewers usually expect a modern solution first, a clear explanation of axes and parent sizing, and awareness that absolute positioning can complicate responsive layouts.
Key points to remember
- Apply Flexbox or Grid centering rules to the parent, not the child.
- Flexbox uses `justify-content: center` and `align-items: center` to center on both axes.
- Grid uses `display: grid` with `place-items: center` for a simple single-child layout.
- The parent needs spare space in each direction for centering to be visible.
- Absolute positioning with a negative 50% translation works but removes the child from normal flow.
Common mistakes candidates make
- Using `text-align: center` and expecting it to center a block-level div vertically and horizontally.
- Setting `height: 100%` without a resolvable parent height and expecting viewport-height centering.
- Using `top: 50%; left: 50%` without the transform, which centers the child's origin rather than the child itself.
Likely follow-up questions
Can `margin: auto` center a div in both directions?
In normal block layout, horizontal auto margins can center a div with a constrained width, but vertical auto margins do not vertically center it. In a flex container, `margin: auto` on a child can absorb available space on both axes and center it.
Why use `min-height` instead of `height` for viewport centering?
`min-height` establishes a minimum centering area while allowing the parent to grow when content becomes taller. A fixed `height` constrains the box and can leave oversized content overflowing it.
How do you center several elements together as one group?
Wrap the elements in a single child container and center that wrapper using Flexbox or Grid. Then control the spacing and arrangement of the elements inside the wrapper separately.
Interview tip: Start with the Flexbox code, explain the two axes and parent height, then mention Grid as the concise alternative.