Problem description

A flex container measures 400px by 200px and contains a child .box. The task is to center the .box both horizontally and vertically within the container.

Goal

Position the .box at the exact center of its parent on both axes.

Constraints

Only CSS changes are allowed; the HTML must remain unchanged and JavaScript cannot be used.

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.