2

On Chrome, the flexbox keeps the body of the page vertically centered on the page. However, on firefox, the page is not vertically centered and all of the content is moved as far to the top of the page as possible which can be seen in the picture and codepen below.

Firefox: not working https://i.stack.imgur.com/nPhS3.jpg

Chrome working https://i.stack.imgur.com/WuKaJ.jpg

Example of problem: https://codepen.io/robbyjm/pen/PLeQVY?

html {
  background-color: #f7f7f7;
  font-family: interstate-mono, monospace;
  font-weight: 400;
  font-style: normal;
}

html body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

html body main {
  display: flex;
  flex-direction: column;
}

html body main .weather-nav {
  display: flex;
}

html body main .weather-nav .weather {
  text-align: center;
}

html body main form {
  margin: 1em auto !important;
  height: 45px;
  width: 490px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.06);
}

html body main form input[type="search"] {
  width: inherit;
  height: inherit;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.75em;
  border-width: 0;
  font-size: 1.1em;
  font-family: interstate-mono, monospace !important;
  font-weight: 300 !important;
  font-style: normal !important;
}

html body main form input[type="search"]:focus {
  outline: none;
}

html body main nav {
  display: flex;
  justify-content: center;
}

html body main nav .bookmark-group {
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding-right: 2em;
}

html body main nav .bookmark-group hr {
  border-color: rgba(0, 0, 0, 0) !important;
}

html body main nav .bookmark {
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

html body main nav .bookmark hr {
  border-color: rgba(0, 0, 0, 0) !important;
}

html body main nav .bookmark li {
  display: inline;
  padding-right: 0.8em;
}

html body main nav .bookmark li a {
  color: black;
  text-decoration: none;
}

footer {
  display: flex;
  align-self: flex-end;
}

#stack {
  color: #f48024;
  font-weight: 400;
}

#git {
  color: #24292e;
  font-weight: 400;
}

#java {
  color: #467899;
  font-weight: 400;
}

#python {
  color: #467899;
  font-weight: 400;
}

#aws {
  color: #ec912d;
  font-weight: 400;
}

#nest {
  color: #aa253a;
  font-weight: 400;
}

#hs {
  color: #fece41;
  font-weight: 400;
}

#dw {
  color: #b30939;
  font-weight: 400;
}

#canvas {
  color: #9e1b32;
  font-weight: 400;
}

#waze {
  color: #85d5ea;
  font-weight: 400;
}

#yt {
  color: red;
  font-weight: 400;
}

#reddit {
  color: #ff4500;
  font-weight: 400;
}

#rd {
  color: silver;
  font-weight: 400;
}

#dayz {
  color: #292929;
  font-weight: 400;
}

#google {
  color: #1da362;
  font-weight: 400;
}

#mf {
  color: #0e2866;
  font-weight: 400;
}

#eye {
  color: #36393e;
  font-weight: 400;
}

#vim {
  color: navy;
  font-weight: 400;
}

#react {
  color: #61dafb;
  font-weight: 400;
}

#js {
  color: #f5f9fa;
  font-weight: 400;
}

#ct {
  color: #ff9800;
  font-weight: 400;
}

#bttn {
  color: #fffde7;
  font-weight: 400;
}

#animate {
  color: #7b8993;
  font-weight: 400;
}
<html>

<head>
  <script src="weather.js" type="text/javascript"></script>
  <script src="bitcoin.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://use.typekit.net/cnw4ewi.css">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>startpage</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header></header>
  <main>
    <div class="weather-nav">
      <form action="https://duckduckgo.com/?q=" method="GET">
        <input type="search" name="q" placeholder=" welcome back" autoFocus></input>
      </form>
      <div class="weather">
        <div id="u"></div>
        <div id="t"></div>
      </div>
    </div>
    <nav>
      <ul class="bookmark-group">
        <li>dev</li>
        <hr>
        <li>social</li>
        <hr>
        <li>storage</li>
        <hr>
        <li>web</li>
      </ul>
      <ul class="bookmark">
        <li><a href="https://www.stackexchange.com"><span id="stack">[</span>Exchange<span id="stack">]</span></a></li>
        <li><a href="https://www.github.com/robbyjm"><span id="git">[</span>GitHub<span id="git">]</span></a></li>
        <li><a href="https://www.ruby-lang.org/en/"><span id="dw">[</span>Ruby<span
                    id="dw">]</span></a></li>
        <li><a href="https://docs.oracle.com/javase/tutorial/"><span id="java">[</span>Java<span id="java">]</span></a></li>
        <li><a href="https://docs.python.org/3/tutorial/index.html"><span id="python">[</span>Python<span id="python">]</span></a></li>
        <li><a href="https://gist.github.com"><span id="git">[</span>Gist<span id="git">]</span></a></li>
        <li><a href="https://aws.amazon.com"><span id="aws">[</span>AWS<span id="aws">]</span></a></li>
        <hr>
        <li><a href="https://www.waze.com/livemap"><span id="waze">[</span>Waze<span id="waze">]</span></a></li>
        <li><a href="https://www.youtube.com"><span id="yt">[</span>YouTube<span id="yt">]</span></a></li>
        <li><a href="https://www.reddit.com"><span id="reddit">[</span>Reddit<span id="reddit">]</span></a></li>
        <li><a href="https://www.yelp.com/"><span id="rd">[</span>Yelp<span id="rd">]</span></a></li>
        <li><a href="https://mail.tutanota.com/login"><span id="dayz">[</span>Tutanota<span id="dayz">]</span></a></li>
        <hr>
        <li><a href="https://drive.google.com"><span id="google">[</span>GoogleDrive<span id="google">]</span></a></li>
        <li><a href="https://mixtape.moe/"><span id="mf">[</span>M.Moe<span id="mf">]</span></a></li>
        <li><a href="https://the-eye.eu/"><span id="eye">[</span>TheEye<span id="eye">]</span></a></li>
        <li><a href="https://vimm.net/?p=vault"><span id="vim">[</span>Vimms<span id="vim">]</span></a></li>
        <hr>
        <li><a href="https://reactjs.org/"><span id="react">[</span>ReactJS<span id="react">]</span></a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript"><span
                            id="java">[</span>JS<span id="java">]</span></a></li>
        <li><a href="https://css-tricks.com/"><span id="ct">[</span>CssTricks<span id="ct">]</span></a></li>
        <li><a href="https://developer.mozilla.org/en-US/"><span id="mdn">[</span>MDN<span id="mdn">]</span></a></li>
        <li><a href="https://bttn.surge.sh/"><span id="animate">[</span>Bttn<span id="animate">]</span></a></li>
        <li><a href="https://daneden.github.io/animate.css/"><span id="animate">[</span>Animate<span id="animate">]</span></a></li>
        <br>
      </ul>
    </nav>
  </main>
  <footer>
    <div id="s"></div>
  </footer>
</body>

</html>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Robby
  • 165
  • 1
  • 11
  • 1
    From your codepen, both chrome and firefox seem to behave same way where they are not vertically centered. Set height:100vh; to body. – Jason Mar 16 '19 at 23:43
  • @Jason `body {height: 100vh}` won't work because it's going to introduce a scroll bar to the page and push the footer off the page slightly – Robby Mar 16 '19 at 23:49
  • Set html {hieght: 100%} and body {margin:0; height:100%}. That seems to work in codePen. https://codepen.io/anon/pen/LamdNq – Jason Mar 16 '19 at 23:57
  • @Jason yes it does! Thanks for the help – Robby Mar 17 '19 at 00:06

1 Answers1

1

You need height: 100vh on the body element. Then, to prevent a vertical scrollbar, override the default margins with margin: 0.

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100vh;  /* NEW */
  margin: 0;  /* NEW */
}


html {
  background-color: #f7f7f7;
  font-family: interstate-mono, monospace;
  font-weight: 400;
  font-style: normal;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100vh;  /* NEW */
  margin: 0;  /* NEW */
}

main {
  display: flex;
  flex-direction: column;
}

.weather-nav {
  display: flex;
}

.weather {
  text-align: center;
}

main form {
  margin: 1em auto !important;
  height: 45px;
  width: 490px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.06);
}

main form input[type="search"] {
  width: inherit;
  height: inherit;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.75em;
  border-width: 0;
  font-size: 1.1em;
  font-family: interstate-mono, monospace !important;
  font-weight: 300 !important;
  font-style: normal !important;
}

main form input[type="search"]:focus {
  outline: none;
}

main nav {
  display: flex;
  justify-content: center;
}

main nav .bookmark-group {
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding-right: 2em;
}

main nav .bookmark-group hr {
  border-color: rgba(0, 0, 0, 0) !important;
}

main nav .bookmark {
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

main nav .bookmark hr {
  border-color: rgba(0, 0, 0, 0) !important;
}

main nav .bookmark li {
  display: inline;
  padding-right: 0.8em;
}

main nav .bookmark li a {
  color: black;
  text-decoration: none;
}

footer {
  display: flex;
  align-self: flex-end;
}

#stack {
  color: #f48024;
  font-weight: 400;
}

#git {
  color: #24292e;
  font-weight: 400;
}

#java {
  color: #467899;
  font-weight: 400;
}

#python {
  color: #467899;
  font-weight: 400;
}

#aws {
  color: #ec912d;
  font-weight: 400;
}

#nest {
  color: #aa253a;
  font-weight: 400;
}

#hs {
  color: #fece41;
  font-weight: 400;
}

#dw {
  color: #b30939;
  font-weight: 400;
}

#canvas {
  color: #9e1b32;
  font-weight: 400;
}

#waze {
  color: #85d5ea;
  font-weight: 400;
}

#yt {
  color: red;
  font-weight: 400;
}

#reddit {
  color: #ff4500;
  font-weight: 400;
}

#rd {
  color: silver;
  font-weight: 400;
}

#dayz {
  color: #292929;
  font-weight: 400;
}

#google {
  color: #1da362;
  font-weight: 400;
}

#mf {
  color: #0e2866;
  font-weight: 400;
}

#eye {
  color: #36393e;
  font-weight: 400;
}

#vim {
  color: navy;
  font-weight: 400;
}

#react {
  color: #61dafb;
  font-weight: 400;
}

#js {
  color: #f5f9fa;
  font-weight: 400;
}

#ct {
  color: #ff9800;
  font-weight: 400;
}

#bttn {
  color: #fffde7;
  font-weight: 400;
}

#animate {
  color: #7b8993;
  font-weight: 400;
}
<header></header>
<main>
  <div class="weather-nav">
    <form action="https://duckduckgo.com/?q=" method="GET">
      <input type="search" name="q" placeholder=" welcome back" autoFocus></input>
    </form>
    <div class="weather">
      <div id="u"></div>
      <div id="t"></div>
    </div>
  </div>
  <nav>
    <ul class="bookmark-group">
      <li>dev</li>
      <hr>
      <li>social</li>
      <hr>
      <li>storage</li>
      <hr>
      <li>web</li>
    </ul>
    <ul class="bookmark">
      <li><a href="https://www.stackexchange.com"><span id="stack">[</span>Exchange<span id="stack">]</span></a></li>
      <li><a href="https://www.github.com/robbyjm"><span id="git">[</span>GitHub<span id="git">]</span></a></li>
      <li><a href="https://www.ruby-lang.org/en/"><span id="dw">[</span>Ruby<span
                    id="dw">]</span></a></li>
      <li><a href="https://docs.oracle.com/javase/tutorial/"><span id="java">[</span>Java<span id="java">]</span></a></li>
      <li><a href="https://docs.python.org/3/tutorial/index.html"><span id="python">[</span>Python<span id="python">]</span></a></li>
      <li><a href="https://gist.github.com"><span id="git">[</span>Gist<span id="git">]</span></a></li>
      <li><a href="https://aws.amazon.com"><span id="aws">[</span>AWS<span id="aws">]</span></a></li>
      <hr>
      <li><a href="https://www.waze.com/livemap"><span id="waze">[</span>Waze<span id="waze">]</span></a></li>
      <li><a href="https://www.youtube.com"><span id="yt">[</span>YouTube<span id="yt">]</span></a></li>
      <li><a href="https://www.reddit.com"><span id="reddit">[</span>Reddit<span id="reddit">]</span></a></li>
      <li><a href="https://www.yelp.com/"><span id="rd">[</span>Yelp<span id="rd">]</span></a></li>
      <li><a href="https://mail.tutanota.com/login"><span id="dayz">[</span>Tutanota<span id="dayz">]</span></a></li>
      <hr>
      <li><a href="https://drive.google.com"><span id="google">[</span>GoogleDrive<span id="google">]</span></a></li>
      <li><a href="https://mixtape.moe/"><span id="mf">[</span>M.Moe<span id="mf">]</span></a></li>
      <li><a href="https://the-eye.eu/"><span id="eye">[</span>TheEye<span id="eye">]</span></a></li>
      <li><a href="https://vimm.net/?p=vault"><span id="vim">[</span>Vimms<span id="vim">]</span></a></li>
      <hr>
      <li><a href="https://reactjs.org/"><span id="react">[</span>ReactJS<span id="react">]</span></a></li>
      <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript"><span
                            id="java">[</span>JS<span id="java">]</span></a></li>
      <li><a href="https://css-tricks.com/"><span id="ct">[</span>CssTricks<span id="ct">]</span></a></li>
      <li><a href="https://developer.mozilla.org/en-US/"><span id="mdn">[</span>MDN<span id="mdn">]</span></a></li>
      <li><a href="https://bttn.surge.sh/"><span id="animate">[</span>Bttn<span id="animate">]</span></a></li>
      <li><a href="https://daneden.github.io/animate.css/"><span id="animate">[</span>Animate<span id="animate">]</span></a></li>
      <br>
    </ul>
  </nav>
</main>
<footer>
  <div id="s"></div>
</footer>

Note that you're vertically centering the main element with justify-content: space-between. The element is thus centered on the page only because header and footer have equal heights (0px). However, once the header and footer grow, if they have differing heights, the main element will be thrown off center.

Full explanation and solutions here: Center and bottom-align flex items

Most browsers come with a default margin on the body element. It's usually 8px.

body { margin: 8px; }

This will often launch a vertical scrollbar when the body element is set to 100% height. To remove the overflow, simply override the default with:

body { margin: 0; }
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701