Flexbox provides a simple and powerful way to vertically center content inside a container. By using the align-items and justify-content properties, you can align items both vertically and horizontally within a flex container.

Key Properties

1
align-items: Aligns flex items along the cross axis (vertically in a row layout).
2
justify-content: Aligns flex items along the main axis (horizontally in a row layout).
3
height: The container must have a defined height for vertical centering to work properly.

Example: Centering Content Vertically and Horizontally

In this example, the .container uses both justify-content: center and align-items: center to perfectly center the .box both vertically and horizontally within the 300px-tall flex container.

Alternative: Only Vertical Centering

1
If you only want vertical centering, use align-items: center and omit justify-content.
2
You can also use flex-direction: column to make justify-content handle vertical alignment instead.

Example: Vertical Centering with Column Direction

Best Practices

1
Always set a fixed height or min-height on the container for vertical centering to take effect.
2
Use Flexbox centering instead of older techniques like position: absolute with transform.
3
Combine justify-content and align-items for easy two-dimensional centering.

Difficulty: 3/10

Topics: flex-direction, align-items, justify-content

Scenario Questions

0-2 years experience

1
You're building a card component and the text inside isn't vertically centered — the container is 100px tall, and you've set display: flex. What two properties would you add to fix it?
2
I see your code uses margin: auto to center content vertically. Why might that fail if the container has a dynamic height?
3
You're trying to center a button inside a header, but it's sticking to the top. What's the most likely missing CSS rule?

2-5 years experience

1
Our modal component works fine in Chrome but the content is misaligned in Safari — we're using flexbox to center it. What could be causing this, and how would you debug it?
2
A designer says the avatar in our profile card is visually off-center even though we're using align-items: center. What might be the hidden issue, and how would you verify it?
3
We added flexbox centering to a dynamic list of user avatars, but when one avatar has a longer name, everything shifts. How do you ensure consistent vertical alignment regardless of content height?

5-8 years experience

1
We're building a responsive dashboard with 10+ card components that need to be vertically centered in varying container heights across breakpoints. How do you ensure performance and consistency without triggering layout thrashing?
2
Our design system uses flexbox for vertical centering, but in RTL locales, the alignment breaks in some browsers. How would you architect a solution that's both accessible and cross-browser compatible?
3
We have a legacy component that uses absolute positioning for centering. You're refactoring it to use flexbox — what edge cases do you test for, and how do you ensure no visual regressions in production?

8+ years experience

1
Our design system has 200+ components using flexbox for centering, but we're seeing inconsistent behavior across micro-frontends due to conflicting global styles. How would you enforce a standardized, scalable approach without breaking existing features?
2
We're migrating from a table-based layout system to flexbox for centering across our entire product suite. What architectural decisions do you make to manage technical debt, ensure backward compatibility, and coordinate across 10+ engineering teams?
3
A new accessibility audit found that our vertically centered content causes screen reader navigation issues on mobile. How do you redesign the centering strategy to maintain visual alignment while ensuring semantic structure and keyboard navigation remain intact?

Follow-up Questions

❓What if the content overflows the container?
❓How would this behave if the parent has padding or a border?
❓Why wouldn't this work if the container's height is set to auto?