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