Why is this flex centering not working?

programming web dev
1

Consider this snippet.

.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.

Ellen :smiling_face_with_sunglasses:

2

margin-left: auto wins by eating the free space, so it pushes the child away from the flex centering.

Arthur