5 ms·
"...centering an object horizontally and vertically consistently is still a surprisingly difficult endeavor..." This is so true - even today. Oh wait, someone
by mxuribe 10y ago
"...centering an object horizontally and vertically consistently is still a surprisingly difficult endeavor..." This is so true - even today. Oh wait, someone might state, "but there are frameworks you can simply integrate and they handle that kind of stuff for you, or at least make it easier"...To which I reply, do i really have to include ~500K - 1MB of some framework for this!?! Just silly that centering is an annoying task nowadays.
- Animats 10y agoThat was so easy with tables.
- whostolemyhat 10y agoAt the cost of poor performance on the client [1], so you're just pushing any time saved in development onto your user. The only way around the poor performance of table layouts is to use table-layout: fixed, which then means you lose all responsive layout so you'd need to create a new version for every screen size you wanted to support (and implicitly, not be able to support every size of mobile screen since percentages don't play well with fixed layout. In this case, you haven't saved any time and in fact have created more work for yourself along with a worse version of your site since fewer people will be able to view it properly. [1] http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/#tables http://www.stubbornella.org/content/2009/03/27/reflows-repai...
- nip 10y agoIf you can afford not to support IE9 [1], you don't need a 500K - 1MB framework to center vertically and horizontally by using flexbox (align-items: center; justify-content: center) on the parent container. [1] http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox
- andrei_says_ 10y agoI am looking forward to the day when I don't have to support ie9
- amenod 10y agoFortunately this is not much of an issue because IE is on its well deserved way of dinosaurs and Dodo the bird (my sympathies to those who can't get rid of it because of some dated corporate standards) and Edge doesn't seem to have much impact either. It would fill me with endless joy years back had I known its fate and the success MS will have in next computing platform (mobile). Good riddance!
- 91bananas 10y agoOr you can support it but not give them vertically centered content. Screw em. If they want it to be 5 years ago, let them be 5 years ago. FIVE!
- salmo 10y agoI like to call this degrading gracefully :)
- TylerE 10y agoOr you can use a table and get on with your life.
- leepowers 10y agoOr `display: table` and `display: table-cell` so you can use a `<div>` instead of the dreaded `<table>` tag.
- namuol 10y ago> To which I reply, do i really have to include ~500K - 1MB of some framework for this!?! What framework? .center-the-stuff { display: flex; align-items: center; justify-content: center; }
- deleted 10y ago[deleted]
- fiveseven_ 10y agohere's a non-flexbox solution, but the parent element has to have a set height: .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
- alkonaut 10y agoIt's like a magic spell that makes very little sense and is impossible to guess. If I fire up a reasonable layout system (Xaml for example) which is completely foreign, it's trivial to do there. I can't understand why html/CSS makes it so hard.
- lj3 10y agoBecause html/css was never intended to be used for layout. It's primarily a content styling system for static documents.