I am reminded of one of my favorite tweets of all time:
“The easiest way to vertically center something in CSS is to close your laptop and go to the bar.” - @jakeboxer
How to Center in CSS
41–50 of 297 posts
Re: How to Center in CSS
#42This site should give HTML and CSS separately, rather than giving inline CSS.
Re: How to Center in CSS
#43Result display is too passive.
But, radio buttons are so good design.
Re: How to Center in CSS
#44Earlier quoted context omitted.
Flexbox solves this problem but it's still a bit unwieldy and verbose.
Flexbox can be a bit low level, but with it you can build abstractions (eg. classes or preprocessor mixins) for common use cases, which I think is preferable to having only a high-level tool which can't cover all use cases.
write using modern/stable flexbox syntax and use autoprefixer for older browsers: https://github.com/postcss/autoprefixer
Re: How to Center in CSS
#45As others said, flexbox is a complete replacement for all layour hacks in CSS. This site helped me understand flexbox: http://flexboxin5.com/ Browser support: http://caniuse.com/#feat=flexbox
What's the best polyfill for flexbox?
Re: How to Center in CSS
#46Wow CSS is unfriendly, you really realise how poor it is once you learn other layout systems (android's XML and iOS auto layout, etc). Wish there was another standard that could co-exist side by side on the web, something simple enough to be implemented reliably by the browser vendors.
How do Android's XML and iOS's auto layout compare to Microsoft's WPF? I used the latter around 10 years ago and found it pretty nice.
Re: How to Center in CSS
#47This site should give HTML and CSS separately, rather than giving inline CSS.
Maybe it's just me, but I find it much easier to understand exactly how a proposed solution works when it uses inline CSS. If the HTML and CSS appear separately, I have to look back and forth a lot to make sense of the whole.
Of course, when I actually implement it in my design, I prefer to separate my CSS from my HTML.
I wish the solution was presented in both flavors, side by side.
Re: How to Center in CSS
#48Wow CSS is unfriendly, you really realise how poor it is once you learn other layout systems (android's XML and iOS auto layout, etc). Wish there was another standard that could co-exist side by side on the web, something simple enough to be implemented reliably by the browser vendors.
How do Android's XML and iOS's auto layout compare to Microsoft's WPF? I used the latter around 10 years ago and found it pretty nice.
I haven't used WPF in about that time myself, but Android's XML is a roughly similar experience. No idea about iOS's auto layout.
Re: How to Center in CSS
#49Earlier quoted context omitted.
Depends on what you need for browser support – flexbox is supported in fewer browser versions and requires using multiple rules because the spec changed significantly before finalizing: http://caniuse.com/#feat=css-table http://caniuse.com/#feat=flexbox
Which is why you use something like AutoPrefixer to automagically generate the needed browser prefixes and such, makes it a whole lot easier.
Which still doesn't cover older browsers just prefixes things appropriately for those that support it.
Re: How to Center in CSS
#50Earlier quoted context omitted.
Flexbox solves this problem but it's still a bit unwieldy and verbose.
Verbose? Compared to the other solutions it's a godsend, just use the CSS-tricks guide for it and you'll have nearly zero problems. I absolutely love it and pretty much refuse to use anything else for layout in CSS now.
I agree, flexbox is refreshing. Couple it with autoprefixer or a flexbox scss mixin, layout a design with it for the first time and you won't go back.
For people that are use to hacks + grid systems, it seems weird at first, but over time you will become familiar with a rich layout system and stop thinking left-to-right, it will become more natural. The language of the spec and the declarations (align/justify distinctions, etc) can be weird at first, but you get used to it.