CSSFlexboxGridAlignmentjunior level

Centering a div on both axes

the question

How would you center a div both horizontally and vertically with CSS? Explain why your solution works.

what they're testing: The interviewer is testing whether you understand container-based alignment, layout axes, and the need for available space.

a strong answer

Put the centering rules on the parent. For a row flex container, display: flex; justify-content: center; align-items: center; centers its child on both axes. The parent also needs space to center within, so give it the intended size, such as min-height: 100vh for a full-page panel.

justify-content works on flexbox's main axis, while align-items works on the cross axis. With the default flex-direction: row and the usual horizontal writing mode, those axes are horizontal and vertical. Change to flex-direction: column and the axes swap, so “justify means horizontal” is not a reliable rule.

For a single item, Grid is even shorter: set the parent to display: grid and place-items: center. In Grid, place-items is shorthand for align-items and justify-items, so it centers the item in the block and inline directions. Flexbox fits a one-dimensional surrounding layout; Grid is natural when the parent is already a grid. If the element does not move, inspect the parent’s dimensions. A parent that is only as large as its child has no free space in which to center it.

Where people slip

the tempting wrong answer, and what's actually true

Set `text-align: center` and `vertical-align: middle` on the div.
`text-align` centers inline content inside the div, not the div itself. `vertical-align` does not apply to a block-level div, so neither declaration centers that block on both axes.
`justify-content` is always horizontal and `align-items` is always vertical.
In flexbox they follow the main and cross axes, which change when `flex-direction` changes.
Put `display: flex`, `justify-content`, and `align-items` on the div being centered.
Those declarations belong on the parent flex container so they align its flex item.
Vertical centering will visibly move the child even when the parent is only as tall as the child.
The parent needs free space on the vertical axis. If it is only as tall as the child, centering has no space in which to move the child.

If they push further

How would you do the same thing with CSS Grid?

Use `display: grid` and `place-items: center` on the parent. In Grid, the shorthand sets `align-items` and `justify-items`, centering the item in the block and inline directions.

What changes if the flex container uses `flex-direction: column`?

In a horizontal writing mode, the main axis becomes vertical and the cross axis horizontal, so `justify-content` and `align-items` swap physical directions.

Why does vertical centering sometimes appear not to work?

Check whether the parent has extra height to distribute; a container that is only as tall as its child has no visible vertical space for alignment.

Sources

Now answer it yourself.

Reading a strong answer is easy. Producing one under pressure is the skill the interview tests. Gapmap grades your answer against the same bar an interviewer would.

was this useful?

beta

The interviewer part is in the works.

The diagnostic, personal maps, and AI mock interviews are being finished right now. The notes stay free either way. Leave an email and you'll get the first-cohort invite, plus a month of Pro when it opens.