4 ms·
This is a straw man. Today you can simply use flexbox on the container: display: flex; justify-content: center; // horizontal align-items: center; // ve
by _bxg1 6y ago
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.
- petepete 6y agoFlexbox (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.
- pjmlp 6y agoFor me as well, specially grid, since it was originally submitted by XAML team and is heavily influenced by its grid layout engine.
- account42 6y agoThat is exactly the code the website will generate if you select no IE support.
- _bxg1 6y agoYet 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.
- frabert 6y agoWell it's not true if you decide to ignore the fact that this does address the situations in which centering is a pain in the ass. If you exclude all the factors this takes into account, it obviously becomes trivial.
- TylerE 6y agoIt is always the minority of cars that kill you. If it only has to 95% work, that’s always been easy.
- breakingcups 6y agoThat's only misleading if you don't have to support IE. I'm guessing that's the case for you but many of us still have to. Also, this site seems to have gone up in 2015 and hasn't changed (substantially) since. I also don't think you're correct in calling this a straw man. This is not a debate and there was no other party whose assertion this site seems to refute, so calling it a straw man doesn't seem to fit.
- cris-ward 6y agoActually it also works in IE11, as it should. Flex does work in IE11 with some known bugs - https://caniuse.com/#search=display%20flex https://caniuse.com/#search=display%20flex
- njsubedi 6y agoYes, 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`.
- soperj 6y agothat can cause some issues in Chrome oddly enough, depending on how you're using it.
- deleted 6y ago[deleted]
- RyanGoosling 6y agoWhat does a JS polyfill have to do with CSS? Also, try that out in IE 11 without a polyfill. This works in IE without a JavaScript polyfill (lol): <html> <body> <div style="width: 400px; height: 400px; background: red; display: flex; align-items: center; justify-content: center;"> <div>TESTING</div> </div> </body> </html>
- NeutronStar 6y agoI have to support IE8 at work so this wouldn't work.
- alisey 6y agoAnd yet six years later still no widespread support for the 'safe' keyword. Which means the content can overflow the container without a way to scroll to some parts of it: https://jsfiddle.net/r50qseah/ https://jsfiddle.net/r50qseah/
- aerovistae 6y agoWhat is the 'safe' keyword?
- alisey 6y agohttps://drafts.csswg.org/css-align-3/#overflow-values https://drafts.csswg.org/css-align-3/#overflow-values