Vertical Centering with Flexbox

Problem description

The container is 400px wide and 200px tall and contains a child element .box that is 200px wide and 100px tall. The task is to vertically center the .box within the container so it sits midway from top to bottom.

Goal

Ensure the .box’s vertical center aligns with the container’s vertical midpoint.

Constraints

Only CSS may be used; you cannot alter the HTML structure or introduce JavaScript.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.