How do you vertically center content using Flexbox?

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

align-items: Aligns flex items along the cross axis (vertically in a row layout).
justify-content: Aligns flex items along the main axis (horizontally in a row layout).
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

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

Example: Vertical Centering with Column Direction

Best Practices

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

Question Loading...

Transformation and Transition

Frameworks

Everything else