How do you center a div both horizontally and vertically using Flexbox?
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
Set the parent container's
displaytoflex.Use
justify-content: centerto center items along the main axis (horizontal by default).Use
align-items: centerto center items along the cross axis (vertical by default).Optionally, use
heighton the container to ensure vertical centering works if the container has limited height.
Example: Centering a Div
In this example, the .box div is perfectly centered both horizontally and vertically within the .container using Flexbox properties.