Bit of an old meme now, which mostly comes out of misunderstanding the difficulty of actually designing a layout system and the tradeoffs involved.

Anyway it's easy and has been for ages:

  display: table-cell; vertical-align: middle;

It sure doesn't help that there are multiple "easy" ways to do it. A sibling content mentions flexbox. There's another with CSS transforms.

CSS accumulates techniques, each one intended to compensate for defects with the other -- and they interact in obscure ways. Googling will always turn up recommendations for each. You end up with Perl-like "There Is More Than One Way To Do It" -- and you have to know all of them if you want to actually do anything.

Is `display: table` a css feature made for centering things? No?

Not a fan of tailwind, but whoever thinks that is simple misunderstood the meaning of the word, it's not about the number of characters you have to type.

You can do this already with:

  <div class="container">This is the text</div>

  .container {
    align-items: center
    display: flex;
    justify-content: 
    height: 200px;
  }

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

Two of those lines exist to handle each axis separately, the first is to define the layout mode you are using. It doesn't get much simpler while still maintaining a fine level of control over each aspect of the layout. I don't buy that it has to be "better" than this.

Which keyword defines the axis in question?

Justify content and Align items operate on the Main axis and the Cross axis respectively. By default this would be the horizontal and vertical. Because of the flexibility of the layout system you can tell it to distribute the main axis vertically instead (flex-direction: column) which would make the cross access horizontal. There is a consistent logic to this which affords a lot of power when creating layouts.

I’m sorry, this is unacceptable reasoning.

We are owed a better API, let’s get the right people on this.

The current layout system is designed with language (and content) direction preferences in mind. Could you expand on what you think an ideal layout system would be? I'd be interested to see what an alternative would look like with the same considerations.

Two lines

div { display: grid; place-items: center; }

Almost there. CSS spec people if you mingle with the common folk, take a look. Let’s get this down to 1 line.

I mean, 2 could be fine, if it is one for vertical and one for horizontal...

Seems to require also adding text-align: center to work on multiline text to get center-justified text