Me: "Hmm. I should center this image."

img {
align-self: center;
}

CSS: "LOL, no. Intuitively, as a first logical guess at forgotten CSS syntax, that seems like what you ought to type. But this world makes no sense and my creator was a sadist. Here's what you actually need to do."

img {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
float: none;
}

align-self is an inside joke and never works.

Anyone who says otherwise is in on it...

The boxes of flex, you need them

css {

align-self: chaotic-evil;

}

Yeah, CSS is a hodge-podge of mixed, evolved standards over the years that means you can't just guess at what a property does by the name. You have to know exactly what you're doing, and exactly how it interacts with everything else you're using.

It's a complete mess, and while the new sides of it like flex & grid are pretty neat, it really wants redesigning from the ground up to be something sensible. It'll never happen mind you, but one can dream.

@AlmondSauce This is why all good frontend developers use Microsoft Frontpage: No need to bother writing CSS, and it produces great, complaint HTML4 / CSS2 code which renders perfectly in all browsers, and it's even responsive on all screen sizes from 4K to smartphones by default!

Or, you know, just

<div style="display:flex; align-items: center; justify-content: center;">
<img />
</div>

Hm, actually, it can be shortened to "margin: 0 auto;"

CSS is a void, alright? There is no gravity for explicitness and proper rules naming.

@junon ah, the old magic.

Petition to bring back the <center> tag?

@SortOfTested flexbox be like

Oh you want content to scroll properly?? Haha, that's simple and totally not obscure. Just set the height of the parent to 0. And then go fuck yourself

@wackOverflow <center> didn't go anywhere AFAIK.

@junon I definitely remember using it mid 2000s back in the MySpace days. I didn’t write any HTML between 2009-2019 and when I came back to it I was told it was deprecated and not to use it.