Moderate CSS Question 71 of 229

How would you center a div both horizontally and vertically?

Frontend Master · Speak this in 60–90 seconds · Faridabad & Delhi NCR

PICTURE THIS: FLEX VS GRID

Flex — one line

Grid — rows + cols

Simple meaning

The modern answer is flex on the parent with justify-content and align-items set to center, or grid with place-items center.

WHY — CSS instead of guessing?

Why interviewers care about CSS:

This is a process

question about CSS.

Panels listen for order,

trade-offs, and what you would actually do on a Frontend project - not buzzwords.

Stay structured

Name the idea, why it exists, then one short example.

Close cleanly

End with when you use it and one common pitfall.

STEPS — What happens step by step?

Before you speak the answer, walk the interviewer through these steps:

1
The modern answer is
flex on the parent with justify-content and align-items set to center, or grid with place-items center.
2
Absolute plus translate is
the older trick when the parent is positioned.
3
I mention that margin
auto on a flex child also centers on the main axis.
4
Give an example
One tiny concrete case you can say aloud.
5
Common mistake
What juniors usually get wrong.
6
Close
When you pick this over the alternative.

EXAMPLE — See it in action

Here's a short line you can speak, broken into clear beats:

Say this line

“Absolute plus translate is the older trick when the parent is positioned.”

Break into beats

Absoluteplustranslateistheolder

Speaking order

2987408337471632900

Note: Adapt this scaffold to your own project — keep it under 60–90 seconds.

Key takeaway

The modern answer is flex on the parent with justify-content and align-items set to center, or grid with place-items center. Absolute plus translate is the older trick when the parent is positioned.