Why is this flex centering not working?

programming web dev
1

Quick CSS layout question.

.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

2

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

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

BobaMilk

3

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

BayMax

4

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

5

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

Hari