⚡ Quick Fix (TL;DR)

The Culprit: Centering an element on only one axis leaves it aligned to the default edge on the other.

The Fix: Combine both properties to center the content vertically and horizontally at once. Same container-height dependency as vertical centering alone.

.my-element {
  display: flex;
  align-items: center;
  justify-content: center;
}