I haven't seen so much nay-saying on HN in a while. It's like because there's an artistic element this or it's pure-web tech the appreciation of a cool hack and interesting exploration of a technology is completely gone. This is a classic example of a "hack", pushing CSS slightly beyond what it was intended for and potentially what is practical.
But it's beautiful and clever, and if you truly can't appreciate it, that's sad.
Scanning through the comments, it looks like most of the naysaying was downvoted and the comments about how it's neat floated to the top, including yours.
This is pretty common comment pattern on reddit (everyone hand-wringing self-righteously over the "problem" of a few, heavily downvoted comments). It's disappointing to see it here. And yes, I realize there is some irony in this comment.
I posted my comment when those that are now downvoted were at the top, and the link had already been up for 3 hours and was near the top of the homepage. If it had been just a few unfortunate comments on a fresh thread, I would not have bothered. I'm glad things adjusted, but I was providing a point of view that was barely represented at the time.
Then it did its job! When I first came to this thread I felt super sorry for the original author of the page, who most likely didn't post it to HN. Such off-hand, unconstructive cynicism can crush somebody's self-esteem.
This is a little tedious but a CSS preprocessor makes it pretty easy and you only need to do it once for something this simple.
Since Microsoft is pushing automatic upgrades to IE11 hard for security reasons, I see over 80% of our users having a browser which supports flexbox. At that point, it's a manageable problem because you can deploy http://flexiejs.com/ for the people who are prevented by corporate policy from upgrading.
caniuse.com provides broad outlines, quirksmode is much more specific and PPK hasn't really worked on the new non-mobile stuff so far, as far as I've seen. Nothing on flexbox for instance, although he does have box-sizing: padding-box.
caniuse is good for "is there a chance this will work?" or "could I use $some_feature in my new project?", quirksmode is "why doesn't my use of $some_feature work in $pile_of_shit_browser?!?!?!!!"
For simple lookups, pretty much in my experience, especially as it doesn't seem to have seen much by way of updates since IE9.
Though quirksmode does go into more detailed analysis in places which can be pretty useful, particularly for when you are stuck supporting legacy browsers, so caniuse isn't a complete drop-in replacement.
ignoring your frankly unnecessary sarcasm, I'd have to point out that some of us are held to the expectation that websites should look almost the same in older browsers. My previous employer, for example, required full support of all features in IE7, and that the product should even bear some resemblance to a website in IE6. In that situation (combined with AJAXed content making polyfills difficult), flexbox isn't usable. I'm sure I'm not the only one who has been in the situation of having to support non-bleeding-edge browsers.
What constitutes an elaborate hack? You can do it with a hack, but it isn't really elaborate. Put the div in an outer div. The outer div has `display: table-cell` and `vertical-align: middle`.
That's all good and fine unless you also have some requirements about the geometry and behavior of outer div. Then you need to add another div and give it display: table but that interferes with the structure of your document.
Also you might want outer div to fit the space it lies in and height: 100% does not always work.
Basically somewhere around transition from IE to Firefox and from transitional to strict DOCTYPE tables were broken beyond repair for layout purposes. We have not recovered since. Flexbox brings some hope but not necessarily salvation.
Traditionally, HTML layouts are not designed to specify any kind of vertical behavior. There is no "vertical" in HTML. How the interface works (your browser) and how it is used (up-down scrolling) naturally imposed a scaling on width, not on height.
I'm not sure why that's a "good" reason. It's possible to vertically center something using hacks and there are obvious use cases for doing so. The fact that CSS doesn't allow us to do so is a failing of the language, plain and simple.
Traditionally, people used tables for layout and <blink> tags for emphasis. That doesn't make it right, either.
But it's beautiful and clever, and if you truly can't appreciate it, that's sad.