Hacker News new | past | comments | ask | show | jobs | submit login

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/).



IIRC, 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.


>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.


Yeah, I should mention that this is only for browsers that support flexbox (https://caniuse.com/#feat=flexbox) with little regard for browsers that are behind on their updates. Thanks for pointing this out!


Also, flexbox allows a child element to center itself using `margin: auto;`: https://codepen.io/anon/pen/gyLGwW


Is there a benefit to doing it that way?


Over the parent dictating? No, I wouldn't worry about it.

I cannot access your website: ERR_SSL_PROTOCOL_ERROR


What'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).




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: