title: Horizontal and Vertical centered card on bootstrap 4
body: <p>i'm having troubles centering a card (or container). I'm able to center it horizontally but not vertically. I alredy tested some code found on stack and other webpages but it does not seems to work.
  My current code is:</p>
  
  <pre><code>&lt;div class="container col-md-3 py-5"&gt;
      &lt;div class="card"&gt;
          &lt;div class="card-header"&gt;
              &lt;h3 class="mb-0"&gt;Login&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="card-body"&gt;
              &lt;form class="form"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="username"&gt;Username:&lt;/label&gt; &lt;input  class="form-control" type="text" name="username" id="username" autofocus required &gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="password"&gt;Password: &lt;/label&gt; &lt;input class="form-control" type="password" name="user" id="password" required&gt;
                  &lt;/div&gt;
               &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>