title: auto margin is not working in top and bottom in css
body: <p>auto margin in not working in top and bottom.....
  my goal is to make body float in middle with equal margin in top and bottom side.......
  my expected result is to same height of top and bottom margin........
  but the result is body shifted to top side</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
      width: 100vw;
      height: 100vh;
      background-color: red;
      margin: 0px;
      padding: 0px;
  }
  body {
    background-color: chartreuse;
    width: 90%;
    height: 90%;
    padding: 0px;
    margin: auto;
    border-color: black;
    border-width: 10px;
    border-style: solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/fvwaX.png" rel="nofollow noreferrer">screenshot of page</a></p>