Hacker News Reader

Comment by _bxg1 | Hacker News Reader

This is a straw man.

Today you can simply use flexbox on the container:

  display: flex;
  justify-content: center; // horizontal
  align-items: center; // vertical

Doesn't work in IE without a JS polyfill (which is available), but has worked in all other browsers for six years or so.

View on HN

That is exactly the code the website will generate if you select no IE support.

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.

It is always the minority of cars that kill you. If it only has to 95% work, that’s always been easy.

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.

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.

Actually it also works in IE11, as it should. Flex does work in IE11 with some known bugs - https://caniuse.com/#search=display%20flex

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.

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/

What is the 'safe' keyword?

https://drafts.csswg.org/css-align-3/#overflow-values

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`.

that can cause some issues in Chrome oddly enough, depending on how you're using it.

Reply on news.ycombinator.com