CSS Flexbox and Grid make centering elements much easier than traditional methods. Both provide properties to align items horizontally, vertically, or both.

Using Flexbox

1
Set the parent container to display: flex.
2
justify-content: center; centers children horizontally.
3
align-items: center; centers children vertically along the cross axis.
4
For full centering both horizontally and vertically, combine justify-content: center and align-items: center.
5
Optional: flex-direction can change the main axis (row or column) for alignment.

Example: Centering with Flexbox

Using Grid

1
Set the parent container to display: grid.
2
place-items: center; centers children both horizontally and vertically.
3
Alternatively, use justify-items: center; for horizontal centering and align-items: center; for vertical centering.
4
Grid is particularly useful for centering multiple items or creating complex layouts.

Example: Centering with Grid

Best Practices

1
Use Flexbox for single-axis layouts (row or column) and simple centering.
2
Use Grid when you need two-dimensional control and multiple items to be aligned.
3
For responsive designs, combine Flexbox or Grid with media queries for consistent centering on different screen sizes.

Difficulty: 3/10

Topics: flexbox alignment, grid alignment, centering patterns

Scenario Questions

0-2 years experience

1
You have a card component with a title and button. The designer wants the button centered horizontally at the bottom of the card. How would you do that with flexbox?
2
A teammate wrote display: flex; justify-content: center; on a container but the child isn't centered vertically. What's missing and why?
3
If you need to center a single div both horizontally and vertically inside a hero section, what's the shortest grid syntax you'd use?

2-5 years experience

1
Our modal component uses position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) for centering. We want to migrate to flex/grid. What's the tradeoff, and what browser support gap should we check?
2
In a responsive navbar, the logo is left, links center, user avatar right — but on mobile the links stack and need vertical centering. How would you structure the flex containers to handle both without duplicating markup?
3
A bug report: a centered spinner inside a flex column container sits at the top in Safari but centers in Chrome. The container has min-height: 100vh. What's the likely cause and fix?

5-8 years experience

1
Design a reusable Centered wrapper component that works for both inline and block children, handles dynamic heights, and doesn't force a specific display type on the consumer. What props or composition pattern would you expose?
2
We're seeing layout thrash in a virtualized list where each row uses flex centering for icons. The rows reflow on resize. How would you measure and mitigate the performance cost without dropping flex?
3
Our design system has three centering utilities: .center-flex, .center-grid, .center-absolute. Teams use them inconsistently. How would you audit usage, decide on a canonical approach, and migrate without breaking 200+ components?

8+ years experience

1
We're standardizing layout primitives across web, React Native, and Flutter. The centering behavior differs subtly (e.g., flexbox vs Yoga vs Flutter's Center widget). How do you define a cross-platform 'center' contract that preserves intent but respects platform idioms?
2
A legacy codebase uses margin: 0 auto, table-cell, and transform hacks for centering across 50k LOC. You have 6 weeks and two engineers. Outline a migration strategy that includes automated detection, visual regression gates, and rollback criteria.
3
The design team wants 'optical centering' for icons next to text — mathematically centered looks off due to visual weight. How would you build a tokenized, themeable solution that works in CSS-in-JS, CSS modules, and vanilla CSS without runtime calculation?

Follow-up Questions

❓What breaks if the parent has no explicit height?
❓How does flex-direction: column flip which property centers horizontally?
❓Any reason to prefer grid over flex for a simple centered card?