That is exactly the code the website will generate if you select no IE support.
Actually it also works in IE11, as it should. Flex does work in IE11 with some known bugs - https://caniuse.com/#search=display%20flex
Yet it opens with this misleading blurb:
> Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors.
Which is no longer true in the great majority of cases.
Re:How to Center in CSS (2015)
by breakingcups on Tuesday May 19, 2020 @11:31AM
(#23235943)
That's only misleading if you don't have to support IE. I'm guessing that's the case for you but many of us still have to.
Also, this site seems to have gone up in 2015 and hasn't changed (substantially) since.
I also don't think you're correct in calling this a straw man. This is not a debate and there was no other party whose assertion this site seems to refute, so calling it a straw man doesn't seem to fit.
Well it's not true if you decide to ignore the fact that this does address the situations in which centering is a pain in the ass. If you exclude all the factors this takes into account, it obviously becomes trivial.
It is always the minority of cars that kill you. If it only has to 95% work, that’s always been easy.
Flexbox (and grid) have made frontend work tolerable again for me. You can do in a handful of lines what used to take all kinds of jiggerypokery, hacks and extra markup to wrap things.
For me as well, specially grid, since it was originally submitted by XAML team and is heavily influenced by its grid layout engine.
Re:How to Center in CSS (2015)
by RyanGoosling on Tuesday May 19, 2020 @11:22AM
(#23235828)
What does a JS polyfill have to do with CSS? Also, try that out in IE 11 without a polyfill.
This works in IE without a JavaScript polyfill (lol): <html> <body> <div style="width: 400px; height: 400px; background: red; display: flex; align-items: center; justify-content: center;"> <div>TESTING</div> </div> </body> </html>
And yet six years later still no widespread support for the 'safe' keyword. Which means the content can overflow the container without a way to scroll to some parts of it: https://jsfiddle.net/r50qseah/
Re:How to Center in CSS (2015)
by aerovistae on Tuesday May 19, 2020 @11:46AM
(#23236130)
What is the 'safe' keyword?
Yes, with flex we don't need anything else. If flex is not available, the browser is supposedly too old to care if we used tables for layout so I'll just throw in `display: table-cell`.
Today you can simply use flexbox on the container:
Doesn't work in IE without a JS polyfill (which is available), but has worked in all other browsers for six years or so.