[extra88]

> Centering with Flexbox requires styling the parent and they use two different properties for horizontal and vertical centering

It does require styling the container, to specify that a new layout system (Flex or Grid) is to be used instead of the default. While it's useful to have separate properties for the two directions, you can also use a single shorthand property to set both at once:

  .container {
    display: flex;
    place-content: center;
  }

Alternately, use only Grid on the parent and place-self on the child.

  .container {
    display: grid;
  }

  .child {
    place-self: center;
  }