title: Vertically align element in container
body: <p>I need to vertically align my form in the middle of my first div. I have it centered horizontally but I can't get it to align in the middle vertically as well.
  Basically even distance from the top and bottom.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="login" style="position:absolute; width: 300px; height: 100px; z-index: 15; top: 50%; left: 50%; margin: -50px 0 0 -150px; background-color: #d0e9fc; border: 1px solid #B5BCC7;"&gt;
    &lt;div align="center" style="vertical-align: middle;"&gt;
      &lt;form th:action="@{/login}" method="post"&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;td&gt;Username:&lt;/td&gt;
            &lt;td&gt;
              &lt;input type="text" name="username" id="username" /&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Password:&lt;/td&gt;
            &lt;td&gt;
              &lt;input type="password" name="password" id="password" /&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td colspan="2"&gt;
              &lt;input class="sButton" type="submit" value="Sign in" label="Sign In" id="submitButton" /&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>