here's a non-flexbox solution, but the parent element has to have a set height:

  .parent {
    position: relative;
  }

  .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

It's like a magic spell that makes very little sense and is impossible to guess.

If I fire up a reasonable layout system (Xaml for example) which is completely foreign, it's trivial to do there.

I can't understand why html/CSS makes it so hard.

Because html/css was never intended to be used for layout. It's primarily a content styling system for static documents.

Html/CSS have been revised a few times since then, so you'd think that the design should gravitate towards making the common things easy.

That was a true statement in maybe 2005?