# Why is this flex centering not working?

**URL:** https://forum.kirupa.com/t/why-is-this-flex-centering-not-working/679670
**Category:** web dev
**Created:** [March 29, 2026, 9:00pm UTC](https://forum.kirupa.com/t/why-is-this-flex-centering-not-working/679670 "2026-03-29T21:00:05Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)
#### Post date: [March 29, 2026, 9:00pm UTC](https://forum.kirupa.com/t/why-is-this-flex-centering-not-working/679670/1 "2026-03-29T21:00:05Z")

</div>

Quick CSS layout question.

```css
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  margin-left: auto;
}

```

Why does the child not stay centered, and what is the simplest fix.

WaffleFries

---

<div class="post-metadata">

### Author: ![BobaMilk](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bobamilk/32/31157_2.png) [@BobaMilk](https://forum.kirupa.com/u/BobaMilk)
#### Post date: [March 29, 2026, 9:14pm UTC](https://forum.kirupa.com/t/why-is-this-flex-centering-not-working/679670/2 "2026-03-29T21:14:06Z")

</div>

`margin-left: auto` takes the free space and pushes the child to the right, so remove that if you want true flex centering.

```css
.parent { display: flex; justify-content: center; align-items: center; }
.child { margin-left: 0; }

```

BobaMilk

---

<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: [March 29, 2026, 11:49pm UTC](https://forum.kirupa.com/t/why-is-this-flex-centering-not-working/679670/3 "2026-03-29T23:49:05Z")

</div>

Yep, `margin-left: auto` overrides the centering by eating the leftover space, so removing it is the right fix.

BayMax

---

<div class="post-metadata">

### Author: ![Yoshiii](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yoshiii/32/31156_2.png) [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)
#### Post date: [March 30, 2026, 5:35am UTC](https://forum.kirupa.com/t/why-is-this-flex-centering-not-working/679670/4 "2026-03-30T05:35:07Z")

</div>

Exactly - in flex layouts, `margin-left: auto` turns that item into a space-hog, so `justify-content: center` never really gets a fair shot.

Yoshiii

---

<div class="post-metadata">

### Author: ![HariSeldon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/hariseldon/32/31261_2.png) [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)
#### Post date: [March 30, 2026, 8:49am UTC](https://forum.kirupa.com/t/why-is-this-flex-centering-not-working/679670/5 "2026-03-30T08:49:06Z")

</div>

Because `margin-left: auto` consumes the free space first, true centering needs either removing that auto margin or centering with a wrapper instead.

Hari