Hacker News new | ask | show | jobs
by _bxg1 2228 days ago
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.
5 comments
account42 2228 days ago
That is exactly the code the website will generate if you select no IE support.
link
cris-ward 2228 days ago
Actually it also works in IE11, as it should. Flex does work in IE11 with some known bugs - https://caniuse.com/#search=display%20flex
link
_bxg1 2228 days ago
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.

link
breakingcups 2228 days ago
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.

link
frabert 2228 days ago
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.
link
TylerE 2228 days ago
It is always the minority of cars that kill you. If it only has to 95% work, that’s always been easy.
link
petepete 2228 days ago
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.
link
pjmlp 2228 days ago
For me as well, specially grid, since it was originally submitted by XAML team and is heavily influenced by its grid layout engine.
link
RyanGoosling 2228 days ago
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>

link
alisey 2228 days ago
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/
link
aerovistae 2228 days ago
What is the 'safe' keyword?
link
alisey 2228 days ago
https://drafts.csswg.org/css-align-3/#overflow-values
link
njsubedi 2228 days ago
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`.
link
soperj 2228 days ago
that can cause some issues in Chrome oddly enough, depending on how you're using it.
link