Absolute Horizontal And Vertical Centering In CSS
coding.smashingmagazine.com
Absolute Horizontal And Vertical Centering In CSS
1–10 of 62 posts
Re: Absolute Horizontal And Vertical Centering In CSS
#2Vertical 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 centering with variable heights.
So you can either convert the surrounding element to a big ole , or you can use CSS to give it a property of display: table-cell. And in both cases, give it a "vertical-align: middle". Then you're good to go!
And of course, horizontal positioning in the table cell is easy.
Re: Absolute Horizontal And Vertical Centering In CSS
#3> This will break cross-browser compatibility.
That kinda ruined all the excitement for me :( Good of the OP to include all of the alternative techniques that might be better for cross-browser or other specific situations.
Seems like transforms are better than the original main suggestion though... why not stick with those?
Re: Absolute Horizontal And Vertical Centering In CSS
#4Vertical 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…
you can do (real) vertical-centering with display: inline-block too
See https://twitter.com/giuseppegurgone/status/38820349236545126...
Re: Absolute Horizontal And Vertical Centering In CSS
#5Vertical 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…
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?
Re: Absolute Horizontal And Vertical Centering In CSS
#6The 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.
Re: Absolute Horizontal And Vertical Centering In CSS
#7It's so frustrating that it still requires all sorts of gymnastics to do something so conceptually simple in CSS, and yet many people seem to see CSS as a self-evident imperative to be used in all cases.
Re: Absolute Horizontal And Vertical Centering In CSS
#8The 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.
Re: Absolute Horizontal And Vertical Centering In CSS
#9Stephen Shaw's (author of the OP article) codepen of the same I sometimes find easier to read, less advertising noise than smashing ...
Re: Absolute Horizontal And Vertical Centering In CSS
#10This is the first time in my life going to HN while I'm futzing with a problem has actually helped. Thought I was going to take my mind off - instead I found the answer immediately!