# Coding Challenge - #5: Center A Card

**URL:** <https://forum.kirupa.com/t/coding-challenge-5-center-a-card/683021>\
**Category:** web dev\
**Created:** [August 11, 2026, 10:00pm UTC](https://forum.kirupa.com/t/coding-challenge-5-center-a-card/683021 "2026-08-11T22:00:05Z")\
**Posts on this page:** 5\
**Page:** 1

<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:** [August 11, 2026, 10:00pm UTC](https://forum.kirupa.com/t/coding-challenge-5-center-a-card/683021/1 "2026-08-11T22: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:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 12, 2026, 2:02pm UTC](https://forum.kirupa.com/t/coding-challenge-5-center-a-card/683021/3 "2026-08-12T14:02:08Z")

</div>

Welcome to the forums @adnanahmed 😀

---

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [August 14, 2026, 7:40pm UTC](https://forum.kirupa.com/t/coding-challenge-5-center-a-card/683021/4 "2026-08-14T19:40:08Z")

</div>

Hey @adnanahmed, welcome. Good to have you here.

---

<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:** [August 14, 2026, 8:00pm UTC](https://forum.kirupa.com/t/coding-challenge-5-center-a-card/683021/5 "2026-08-14T20:00:11Z")

</div>

**Challenge solution:** The challenge is to center a div both horizontally and vertically using flexbox without fixed pixel offsets or absolute positioning.

**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 container ‘`.stage`’, we enable flexbox layout. ‘justify-content: center’ centers the flex items along the main axis (horizontally in a row-direction flex container). ‘align-items: center’ centers the flex items along the cross axis (vertically in a row-direction flex container), achieving perfect centering.

* * *

**Got it:** @adnanahmed 🏆

**First-answer leaderboard**

1. @kirupa - 4 (firsts) 🏆
2. @adnanahmed - 2 (firsts)
3. @emmawalter5 - 1 (first)

---

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [August 14, 2026, 10:20pm UTC](https://forum.kirupa.com/t/coding-challenge-5-center-a-card/683021/6 "2026-08-14T22:20:14Z")

</div>

Oh nice