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

11–20 of 62 posts

Re: Absolute Horizontal And Vertical Centering In CSS

#11

Post by recuter »

Before the inevitable complaints about CSS start flying in, you really actually hate the Box Model and should direct your anger towards it. To wit, the article itself says:

"Other Techniques

Absolute Centering is a great solution for centering, but there are other methods that may fit more specific needs. The most commonly used or recommended methods are Negative Margins, Transforms, Table-Cell, Inline-Block, and now Flexbox. They are covered more in depth in other articles, so I’ll only cover the basics here."

Pray your support matrix allows you to just stick to Flexbox soon and all of this will start to feel like a bad dream from the bygone past.

First we abused tables, then we abused divs, now there are actual sane hooks for this, it just took 20 years is all.

Re: Absolute Horizontal And Vertical Centering In CSS

#12

Post by tomasien »

gmjoe wrote: post #2

Vertical centering isn't that useful when you already have to know the height of things... I mean, if you already know the heights, you can just put the numbers in straight. The best way to do real vertical-centering that works with variable heights, and doesn't use JavaScript, is to take advantage of the fact that table cells do this with "vertical-align: middle". Inexplicably, only table cells allow true vertical c…

That's not true necessarily: what if you're trying to vertically align something of a known height on something WITHOUT a known height. The thing with the unknown height is responsive, while the overlay is not. That's what I was just doing, found this, fixed my problem!

Re: Absolute Horizontal And Vertical Centering In CSS

#13

Post by JakeSc »

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.

Do you have a better suggestion?

I agree with your frustration about this article being newsworthy (it's 2013! How are we still figuring out vertical centering?!), though I would argue that CSS is great for its original use case and certainly has its place today. Why is it bad that CSS is entrenched in the Web?

Like any development technology, CSS has a learning curve and has several shortcomings (like vertical positioning), but I think it's a fine tool for the job and struggle to come up with something better.

Re: Absolute Horizontal And Vertical Centering In CSS

#16

Post by phelmig »

Next time when I want to explain why HTML/CSS can be a pain, I'll take this example.

"Imagine it's 2013 and there is a website that has been online for years, where the greatest hackers and entrepreneurs exchange exciting ideas. When somebody posted an easy solution how to center something in HTML horizontal AND verical it was the favored post on that site for a day" ... ;)

Re: Absolute Horizontal And Vertical Centering In CSS

#17

Post by ggurgone »

gmjoe wrote: post #5
ggurgone wrote: post #4

Earlier quoted context omitted.

you can do (real) vertical-centering with display: inline-block too See https://twitter.com/giuseppegurgone/status/38820349236545126...

Very interesting, I never saw that before! But I can't figure out, for the life of me, why the bizarre ".container:before" declaration is needed -- it would seem to be entirely superfluous, but if you remove it, the whole thing breaks. Can you explain what's going on?

Here is a visual explaination: http://dabblet.com/gist/7359467

The pseudo-element (in red) is 100% tall and both .container:before and content are inline-block with vertical-align: middle;

Re: Absolute Horizontal And Vertical Centering In CSS

#18

Post by untog »

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.

There's nothing wrong with CSS the language. There are missing properties that could be better implemented, and hopefully future browsers will do so. But CSS is still a fine base to work from.

That said, I use LESS. But while everything compiles down to CSS, it doesn't impact me much.

Re: Absolute Horizontal And Vertical Centering In CSS

#19

Post by gcv »

JakeSc wrote: post #13
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.

Do you have a better suggestion? I agree with your frustration about this article being newsworthy (it's 2013! How are we still figuring out vertical centering?!), though I would argue that CSS is great for its original use case and certainly has its place today. Why is it bad that CSS is entrenched in the Web? Like any development technology, CSS has a learning curve and has several shortcomings (like vertical posit…

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.

Re: Absolute Horizontal And Vertical Centering In CSS

#20

Post by masklinn »

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.

Fixes are (finally) coming in for layout in CSS in the form of flexbox (http://philipwalton.github.io/solved-by-flexbox/) (and mayhaps grid layout, we'll see. You can create most layouts with flexbox but it's pretty low-level, grid works at a higher level and looks more modular but has seen less implementation so far)
Post reply on HN