FLEXBOX / INTERACTIVE PRACTICE

Center a card with Flexbox

Write the code. Watch the layout change. Make the card feel right at home.

Jump to editor ↓

What you are building

Use this pattern for an empty state, welcome screen, or focused message panel.

Your goal: Center content on both axes and understand why the rules belong on its parent.

Your mission

The card starts in the top-left corner. Edit the .stage CSS rule to center it horizontally and vertically. Keep the stage at least 300px tall and the card directly inside it.

  1. Make .stage a flex container.
  2. Center its contents along the main axis.
  3. Center its contents along the cross axis.
  4. Check your solution and use the feedback to improve it.

Keep the starter dimensions and spacing while you solve it. You can customize the text and colors. Need a refresher? Read Flexbox alignment.

Why this practice comes now

You have explored the two axes and alignment. Apply those ideas to a single card inside a taller parent.

Concepts to recall
  • Parent and axes — The parent sets the flex direction and therefore the axes.
  • Alignment — Distribute spare space on the main and cross axes separately.

Start with one action

Run the starter, then find .stage in the CSS tab. Make that parent a flex container before changing either alignment rule. Keep the supplied height.

Progress loads in this browser

Your code and completion are saved in this browser. Pass all solution checks to complete this practice in My progress. Editing or resetting code keeps your completion.

Live preview

Preview supports text, headings, and layout elements with classes. Scripts, links, forms, and external resources are disabled.

Target preview

Center content on both axes and understand why the rules belong on its parent. This reference stays unchanged as you edit. Match the layout; your text and colors can be different.

Includes your current work as HTML, CSS, and JavaScript files. How to run it on your computer →

Stuck? Open one hint at a time, try a change, and check again before opening the next. The complete answer stays in the separate explained solution.

Hint 1: activate the layout

Which element controls the arrangement of its children? Think about where a layout system is established.

Hint 2: align both axes

Flexbox has two independent axes. Consider how free space is distributed along each one, and whether the container has room to show the effect.

Hint 3: verify the parent

If only one direction is centered, inspect the other axis on .stage. Keep the card as its direct child and preserve at least 300px of stage height, then run Check solution.

See the explained solution
.stage {
  display: flex;
  justify-content: center;
  align-items: center;
}

Add these declarations to the starter .stage rule, keeping its height. The container needs spare space for centering to be visible. Opening this solution does not pass the exercise; run the checks on your code.