11–20 of 74 posts
Here's what I've been doing for years (The can be any element, like ): WFM YMMV
you really use the same id twice on a page?! Heresey! Also.. I do the same (essentially: margin: 0 auto) but it works with display: block too, and you don't need text-align center on the parent.
This is a straw man. Today you can simply use flexbox on the container: display: flex; justify-content: center; // horizontal align-items: center; // vertical Doesn't work in IE without a JS polyfill (which is available), but has worked in all other browsers for six years or so.
Flexbox (and grid) have made frontend work tolerable again for me. You can do in a handful of lines what used to take all kinds of jiggerypokery, hacks and extra markup to wrap things.
This is a straw man. Today you can simply use flexbox on the container: display: flex; justify-content: center; // horizontal align-items: center; // vertical Doesn't work in IE without a JS polyfill (which is available), but has worked in all other browsers for six years or so.
This works in IE without a JavaScript polyfill (lol): TESTING
Back then, this site was addressing a big problem and, to some degree, it's still a confounding problem sometimes.
So high-five to its creator. And to the HN haterz in these comments, take a hike.
This is a straw man. Today you can simply use flexbox on the container: display: flex; justify-content: center; // horizontal align-items: center; // vertical Doesn't work in IE without a JS polyfill (which is available), but has worked in all other browsers for six years or so.
Yes, with flex we don't need anything else. If flex is not available, the browser is supposedly too old to care if we used tables for layout so I'll just throw in `display: table-cell`.
I am not into the CSS game anymore, if anything needs to be done I'd just go with whatever widgets any CSS framework offers, but why has it been so hard for so long to center things with CSS (I believe flexbox finally fixed it) ?
This is a straw man. Today you can simply use flexbox on the container: display: flex; justify-content: center; // horizontal align-items: center; // vertical Doesn't work in IE without a JS polyfill (which is available), but has worked in all other browsers for six years or so.
That is exactly the code the website will generate if you select no IE support.
Earlier quoted context omitted.
That is exactly the code the website will generate if you select no IE support.
Yet it opens with this misleading blurb: > Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. Which is no longer true in the great majority of cases.
div { position: absolute; right: 50%; bottom: 50% transform: translate(50%, 50%); }