title: I am unable to center a div both horizontally and vertically
body: <p>I used Flexbox on my div but it still only centers horizontally and not vertically. I want it in the middle of the screen. Here is my code -:</p>
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;style&gt;
          .box{
              background-color: red;
              border: 2px solid black;
              width: 100px;
              height: 100px;
              }
          .container{
              display: flex;
              justify-content: center;
              align-items: center;
          }   
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;box&quot;&gt;Box1&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Here is my output -:</p>
  <p><a href="https://i.stack.imgur.com/oxgzq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oxgzq.png" alt="Output" /></a></p>
  <p>Any help would be great.</p>
  <p>Thank You.</p>