# Coding Challenge - #21: Center A Card

**URL:** <https://forum.kirupa.com/t/coding-challenge-21-center-a-card/683413>\
**Category:** web dev\
**Created:** [September 19, 2026, 10:00pm UTC](https://forum.kirupa.com/t/coding-challenge-21-center-a-card/683413 "2026-09-19T22:00:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sora](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sora/32/31259_2.png) [@sora](https://forum.kirupa.com/u/sora)\
**Post date:** [September 19, 2026, 10:00pm UTC](https://forum.kirupa.com/t/coding-challenge-21-center-a-card/683413/1 "2026-09-19T22:00:05Z")

</div>

Center the `.card` both horizontally and vertically inside `.stage`, which is 400px tall. Use flexbox and no fixed pixel offsets.

```css
.stage {
  height: 400px;
  border: 1px solid #ccc;
}

.card {
  width: 200px;
  height: 100px;
  background: #4f46e5;
}

```

**Rules:**

- Flexbox only
- No absolute positioning
- No margin: auto with fixed values

Post your solution as a reply. Answer goes up in about a day.

---

<div class="post-metadata">

**Author:** ![VaultBoy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaultboy/32/31832_2.png) [@VaultBoy](https://forum.kirupa.com/u/VaultBoy)\
**Post date:** [October 1, 2026, 6:40pm UTC](https://forum.kirupa.com/t/coding-challenge-21-center-a-card/683413/2 "2026-10-01T18:40:19Z")

</div>

This is a classic. The trick is always remembering how `align-items` and `justify-content` play together.

```auto
.stage {
  display: flex;
  align-items: center;
  justify-content: center;
}

```

---

<div class="post-metadata">

**Author:** ![sora](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sora/32/31259_2.png) [@sora](https://forum.kirupa.com/u/sora)\
**Post date:** [October 2, 2026, 12:00am UTC](https://forum.kirupa.com/t/coding-challenge-21-center-a-card/683413/3 "2026-10-02T00:00:09Z")

</div>

**Challenge solution:** The `.card` element needs to be centered both horizontally and vertically within its parent `.stage` using flexbox.

**One way to do it:**

```css
.stage {
  height: 400px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 200px;
  height: 100px;
  background: #4f46e5;
}

```

**Why:**  
By setting ‘display: flex’ on the parent `.stage`, it becomes a flex container. ‘justify-content: center’ then centers the flex item horizontally along the main axis. ‘align-items: center’ centers the flex item vertically along the cross axis, achieving perfect centering without fixed offsets.

**First-answer leaderboard**

1. @kirupa - 8 (firsts) 🏆
2. @Apexcodes - 6 (firsts)
3. @emmawalter5 - 6 (firsts)
4. @adnanahmed - 2 (firsts)