How do you center a div both horizontally and vertically using Flexbox?

Difficulty: 3/10

flex-direction, justify-content, align-items

Centering a Div with Flexbox

Flexbox makes it simple to center a div horizontally and vertically by aligning items along both the main and cross axes.

Key Steps

1
Set the parent container's display to flex.
2
Use justify-content: center to center items along the main axis (horizontal by default).
3
Use align-items: center to center items along the cross axis (vertical by default).
4

Example: Centering a Div

In this example, the .box div is perfectly centered both horizontally and vertically within the .container using Flexbox properties.

0-2 years experience

2-5 years experience