7 ms·
Yep, I think the priorities should be <html> and <body>. Here's mine, which centers the content both horizontally and vertically via flexbox: html {
by ChristianBundy 8y ago
Yep, I think the priorities should be <html> and <body>. Here's mine, which centers the content both horizontally and vertically via flexbox:
html {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
}
@media screen {
body {
max-width: 40rem;
margin: 1rem;
}
}
It's not perfect, but it works well for simple websites (e.g. https://colorclock.hashbase.io/ https://colorclock.hashbase.io/).
- sucrose 8y agoI cannot access your website: ERR_SSL_PROTOCOL_ERROR
- extra88 8y agoWhat's your browser? They're using a Let's Encrypt wildcard certificate. It works for me in various current browsers but also in Firefox 3.6.27 for Mac (from 2012).
- cimmanom 8y agoIIRC, the way browsers interpret margins and widths on the <body> element isn't consistent; and they may not support overriding block properties on the <html> element at all. Or maybe they do now, but that certainly wasn't cross-browser-friendly until very recently.
- SquareWheel 8y ago>IIRC, the way browsers interpret margins and widths on the <body> element isn't consistent I know IE5.5 doesn't allow resizing of the body, but it was fixed in IE6. If you're using flexbox it's probably not your chief concern anyway.
- ChristianBundy 8y agoYeah, I should mention that this is only for browsers that support flexbox (https://caniuse.com/#feat=flexbox https://caniuse.com/#feat=flexbox) with little regard for browsers that are behind on their updates. Thanks for pointing this out!
- albedoa 8y agoAlso, flexbox allows a child element to center itself using `margin: auto;`: https://codepen.io/anon/pen/gyLGwW https://codepen.io/anon/pen/gyLGwW
- ChristianBundy 8y agoIs there a benefit to doing it that way?
- albedoa 8y agoOver the parent dictating? No, I wouldn't worry about it.