Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Absolute Horizontal And Vertical Centering In CSS

coding.smashingmagazine.com

Post reply on HN
Print view View original

41–50 of 62 posts

Re: Absolute Horizontal And Vertical Centering In CSS

#41

Post by Segmentation »

camerondaigle wrote: post #31

Good grief, if the element to be centered has a fixed height and width, then there's nothing to this. I've been using the negative margin method for years: http://jsfiddle.net/mBBJM/2155/ Not that it's any less Stockholm-Syndrome-y than the linked article's solution, but still, I have no clue why this is on the front page of HN.

Front-end stuff always seems to make the front page of Hacker News. I think it's because front-end is easier, and possibly more "hip" right now (as far as jobs go), so there's more interest in it.

Re: Absolute Horizontal And Vertical Centering In CSS

#42

Post by djKianoosh »

svachalek wrote: post #26
ape4 wrote: post #15

What about using the HTML5 calc() to figure out the center?

If you are willing to use something as bleeding-edge as calc, you may as well do it the right way: http://philipwalton.github.io/solved-by-flexbox/demos/vertic...

Only that doesn't work in IE10 :( http://caniuse.com/#search=flexbox

Re: Absolute Horizontal And Vertical Centering In CSS

#43

Post by pete_b »

There are, in-fact, and have been for a while several known ways do do this in CSS 2.1 this just being another with a similar long list of restrictions and context requirements.

http://css-tricks.com/centering-in-the-unknown/

They're all much of a muchness, at least we'll be able to just use flexbox soon enough.

Re: Absolute Horizontal And Vertical Centering In CSS

#44

Post by nostrademons »

Segmentation wrote: post #41
camerondaigle wrote: post #31

Good grief, if the element to be centered has a fixed height and width, then there's nothing to this. I've been using the negative margin method for years: http://jsfiddle.net/mBBJM/2155/ Not that it's any less Stockholm-Syndrome-y than the linked article's solution, but still, I have no clue why this is on the front page of HN.

Front-end stuff always seems to make the front page of Hacker News. I think it's because front-end is easier, and possibly more "hip" right now (as far as jobs go), so there's more interest in it.

I'm a full-stack engineer that started out on the front end. I don't think frontend is easier - in terms of the amount of background you need to know to produce something useful, being a frontend engineer is significantly harder than being a backend one. However, frontend stuff demoes better. If you do a fancy machine-learning analysis of some public data set but present it as a command-line app or a table on some bare-bones website, people will be like "Uh, what's the deal?" If you make things fly around the screen in cool patterns, they'll be like "Woah! I didn't know you could do that!"

A lot of this is also because a frontend engineer's job is to lower the cognitive processing a user has to do, while a backend engineer's job is to come up with useful things to cognitively process. In other words, when a backend engineer comes up with a demo, they make the viewer work to understand it, while when a frontend engineer does the same they make the viewer go "Ooh! Aah!"

Re: Absolute Horizontal And Vertical Centering In CSS

#45

Post by nostrademons »

Pxtl wrote: post #27
gcv wrote: post #19

Earlier quoted context omitted.

CSS is not great for its original use case. It was poorly designed by a group of people who chose to ignore existing understanding of layout models. The TeX boxes+glue model, had it been adapted for CSS, would have made all the absurdities and nasty layout workarounds of the last 20 years unnecessary.

I like to point to the failure of keeping table headers visible at the top of a page as you scroll down a table. If I had a book where a table spanned multiple pages and the header row wasn't included at the top of the page, I would throw the book out. A scrollable table with fixed headers is something that Visual Basic supported in 1997.

Position:sticky will fix that once it's supported in a critical mass of browsers.

Re: Absolute Horizontal And Vertical Centering In CSS

#46

Post by camerondaigle »

nostrademons wrote: post #44
Segmentation wrote: post #41

Earlier quoted context omitted.

Front-end stuff always seems to make the front page of Hacker News. I think it's because front-end is easier, and possibly more "hip" right now (as far as jobs go), so there's more interest in it.

I'm a full-stack engineer that started out on the front end. I don't think frontend is easier - in terms of the amount of background you need to know to produce something useful, being a frontend engineer is significantly harder than being a backend one. However, frontend stuff demoes better . If you do a fancy machine-learning analysis of some public data set but present it as a command-line app or a table on some b…

Fair enough. This seems like CSS Positioning 201 to me, but I've been dealing with this stuff for a long time now, so my perspective is probably pretty skewed.

I completely agree with your point re: cognitive processing: good CSS communicates intent to the reader, so if this kind of stuff is unclear to people and the Smashing Mag post helps the concept click in readers' minds, then it's a win :)

Re: Absolute Horizontal And Vertical Centering In CSS

#47

Post by aschearer »

I'm curious why there isn't something like TypeScript or Coffeescript for CSS? I'm aware of LESS and SASS but to my knowledge they don't go as far as their JavaScript complements in adding future-looking functionality. Is it simply not possible to add CSS grid or flexbox (or both!) support to LESS and have it compile down to plain ol' CSS?

Re: Absolute Horizontal And Vertical Centering In CSS

#48

Post by RaphiePS »

Zikes wrote: post #40
brandonbloom wrote: post #8

Earlier quoted context omitted.

I've been saying this of JS/HTML/CSS for years, but people seem to suffer from severe stockholm syndrome.

There have been attempts to fix this by creating languages which compile to each of those: HAML for HTML, CoffeeScript/Dart for JS, SASS/LESS for CSS. The language benefits tend to be fairly obvious, but there hasn't been much of anything in the way of native browser adoption that I've seen yet, apart from Google's plans for Chrome & Dart.

Now, I haven't used SASS/LESS that much, so feel free to correct me, but it seems like they're solving a different problem. They keep your code DRYer, add nice things like mixins, etc.

However, they don't abstract over tasks like layout--you're still stuck with hacky CSS tricks and semantics.

Re: Absolute Horizontal And Vertical Centering In CSS

#49

Post by JungleGymSam »

pmichaud wrote: post #6

The fact that this is an interesting article is a huge indictment of CSS. It was developed for a different, simpler use case, and it's obviously the wrong abstraction at this point. Too bad it's entrenched.

This is the first thought that came to my mind when I read the headline (your first sentence). Glad to find out I'm not alone.

Re: Absolute Horizontal And Vertical Centering In CSS

#50

Post by hnriot »

brandonbloom wrote: post #8
pmichaud wrote: post #6

The fact that this is an interesting article is a huge indictment of CSS. It was developed for a different, simpler use case, and it's obviously the wrong abstraction at this point. Too bad it's entrenched.

I've been saying this of JS/HTML/CSS for years, but people seem to suffer from severe stockholm syndrome.

yet, despite this the web seems to be doing just fine, apps are powerful, often better than native and nobody (else) seems to be complaining that much. Sure, some things take actual skill to implement. We live in an imperfect world, and while it's always easy to blame the tools, it's far better to just get on with improving things and making the best of what we have. It's a far better world today that the setup.exe days.
Post reply on HN