Hacker News Reader

Comment by dheera | Hacker News Reader

Great, so now I can write an x86 emulator and run Windows 95 in CSS, but I still can't figure out how to reliably vertically-center an element.

View on HN

Flexbox to the rescue! This is a pretty good guide:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

html, body { height: 100%; margin: 0; }

body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }

And this is why we are in no way better-off with Chrome as the #1 browser than we were with IE as the #1 Browser. In order to center content reliably across browsers, we have to implement browser-specific hacks, because flexbox was only finalized in May of this year. This has been a struggle since HTML+, so almost 20 years now, just to center content.

Thanks Google, Apple and Microsoft.

Meanwhile, I have web pages on my hard drive that I designed in 1999 with vertical alignment (amongst other tricks), that worked in Netscape 4.x, Seamonkey 0.86, and still work in Firefox 42. and I never needed a -moz prefix.

What? Flex doesn't need a prefix and hasn't for ages (since version 20. It's on 50 now)

Furthermore, it's best that features are behind prefixes to be used for progressive enhancement and any major browser implements new features behind a prefix before it is accepted.

There is no "cross browser hacks" for any evergreen browser. Except, ironically given your statement, IE has a buggy implementation. Edge supports it and Microsoft is deprecating IE<11 and will hopefully fix the issues in IE11. The big issues can be avoided by not declaring a min-height.

http://caniuse.com/#feat=flexbox

yes, beta features should be behind a prefix. that's all established.

However, if vertical alignment is still prefixed in 2015, I don't think I need to submit more for my case, downvoted as it may be.

But it isn't, which is why you're getting downvoted.

Although the outdated example is largely to blame.

Barring IE, that requires the old syntax and or had bugs, support for the standard flexbox is now in every modern browser: http://caniuse.com/#feat=flexbox

Maybe it's time to stop blaming the standard and start blaming 1. Users who do not use modern browsers or 2. Developers that don't update/use the new toys out there :)

No you don't. That's just one of several ways you can vertically center something.

can you add to the ones already submitted?

The bible of CSS centering: https://css-tricks.com/centering-css-complete-guide/

There is this too: http://willkoehler.net/2014/08/28/vertically-align-content-w...

There are a lot of ways, really.

As someone who writes CSS daily (css, less and scss), I've yet to understand how some people can have any issues at all with CSS. Sure, it's quirky but you can pretty much master it in a few months at most.

(That being said, I make my life a lot more easier by using tools such as autoprefixers, library of mixins that allow me to summon arcane CSS declarations at will, etc.)

There are two widely known techniques for vertically centering an element in CSS that are virtually supported across the board:

    display: table-cell; vertical-align: middle;

    position: absolute; top: 50%; transform: translateY(-50%)

You can't really complain about that point anymore.

so hack it into a table cell, and valign like it's html 4.01 all over again, or render the full page, then reposition content based on that size? am I understanding these techniques correctly?

There's an important difference between creating a table in your HTML for layout, and using CSS to tell the browser to use its table layout algorithm on a particular element to center it.

Yes, it's still inelegant and nonobvious, but it's also better than throwing document semantics out the window.

Exactly, "widely known". Like, CSS is so convoluted to work with, that it's become its own branch of science where people have to research, publish, and circulate these magic concocted strings just to do basic layout tasks like evenly-distributing elements or vertical centering, instead of being able to just RTFM and vertically center something in one simple, easy-to-remember command. It's completely non-intuitive why I would want to make something a "table-cell" or why I would want to "translateY(-50%)" to accomplish vertical centering. And that's only barely scratching the surface of UI design.

Doing something like "if(browser width:height ratio is less than 3:2) keep a video in an aspect ratio of 3:2 and vertically-center it on the screen, else make the video width 100% and crop the video evenly on the top and bottom" is arguably a potentially common design task, yet a convoluted headache in CSS. Now add to that, "place an 'X' button in the upper right corner of the video, leaving a 20-pixel margin", and you're downright waging war with your browser.

Both of your examples don't work in all situations, by the way.

Reply on news.ycombinator.com