title: How to center multiple form elements horizontally and vertically on frame?
body: <h2>Problem</h2>
  <p>I've consulted both this <a href="http://vanseodesign.com/css/vertical-centering/" rel="nofollow noreferrer">resource</a> and this <a href="https://css-tricks.com/centering-css-complete-guide/" rel="nofollow noreferrer">resource</a>, however my form elements are still not centering like they should (I've tried flex, I've tried padding, I've tried stretching, etc). I want both form fields to center both vertically and horizontally on the screen.</p>
  <p>I've wrapped my form elements in a div, yet it's still not working. If anyone could let me know how to do this it would be greatly appreciated!</p>
  <p><a href="https://i.stack.imgur.com/u6hag.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u6hag.png" alt="enter image description here" /></a>
  I want the fields to appear under each other. And I want the fields to be vertically and horizontally centered on the screen.</p>
  <h2>Code</h2>
  <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>body {
      background: #3472FF;
      color: white;
  }
  
  .closeBtn {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 2em;
      color: white;
  }
  
  .login {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .field {
      display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;button class="closeBtn"&gt;&lt;span class="icon-x"&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;form action="form.php" method="post"&gt;
          &lt;div class="login"&gt;
              &lt;div class="field"&gt;
                  &lt;input type="text" name="username" placeholder="Username"&gt; &lt;/div&gt;
              &lt;div class="field"&gt;
                  &lt;input type="text" name="password" placeholder="Password"&gt; &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>