How do you vertically center content using Flexbox?

Difficulty: 3/10

flex-direction, align-items, justify-content

Vertically Centering Content with Flexbox

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.

Scenario Questions

0-2 years experience

How do you vertically center content using Flexbox?

Vertically Centering Content with Flexbox

Scenario Questions

Follow-up Questions