Problem: Flexbox Centering Mixed-Height Children

med
30 min
Try to vertically center flex items of different heights within a container using Flexbox.

Problem description

A .flexbox container of height 200px holds three child elements of varying content-driven heights. The task is to vertically center every child so that their midlines align along the container’s midpoint.

Goal

Ensure each child’s vertical center line matches the container’s vertical midpoint.

Constraints

The solution must use only CSS on the provided structure—no HTML or scripting changes.

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.

Problem: Flexbox Centering Mixed-Height Children

med
30 min
Try to vertically center flex items of different heights within a container using Flexbox.

Problem description

A .flexbox container of height 200px holds three child elements of varying content-driven heights. The task is to vertically center every child so that their midlines align along the container’s midpoint.

Goal

Ensure each child’s vertical center line matches the container’s vertical midpoint.

Constraints

The solution must use only CSS on the provided structure—no HTML or scripting changes.

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.