title: Horizontal and vertical center card in material design lite(MDL)
body: <p>I, am trying to center the card vertically and horizontally in the center of the page. I, am able to center the card horizontally. But not able to center it as vertically. I didn't found any class in MDL to vertically center the card.</p>
  
  <p>Code for center horizontally </p>
  
  <pre><code>&lt;div class="mdl-grid"&gt;
              &lt;div class="mdl-cell mdl-cell--3-col"&gt;
                  &lt;!-- this is just dummy columns --&gt;
              &lt;/div&gt;
              &lt;div class="mdl-cell mdl-cell--6-col"&gt;
                  &lt;figure &gt;
                      &lt;div class="mdl-card mdl-shadow--6dp"&gt;
                          &lt;div class="mdl-card__title mdl-color--primary mdl-color-text--white"&gt;
                              &lt;h2 class="mdl-card__title-text "&gt;Sign in&lt;/h2&gt;
                          &lt;/div&gt;
                          &lt;div class="mdl-card__supporting-text"&gt;
                                                              &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"&gt;
                                  &lt;input class="mdl-textfield__input" id="login"/&gt;
                                  &lt;label class="mdl-textfield__label" for="login"&gt;User Name&lt;/label&gt;
                              &lt;/div&gt;
                              &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"&gt;
                                  &lt;input class="mdl-textfield__input" type="password" id="password"/&gt;
                                  &lt;label class="mdl-textfield__label" for="password"&gt;Password&lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="mdl-card__actions mdl-card--border"&gt;
                              &lt;div class="mdl-grid"&gt;
                                  &lt;button class="mdl-cell mdl-cell--12-col mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-color-text--white"&gt;
                                      Sign in
                                  &lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/figure&gt;
              &lt;/div&gt;
              &lt;div class="mdl-cell mdl-cell--3-col"&gt;
                  &lt;!-- this is just dummy columns --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The above code only center the card horizontally. I want to center the card vertically as well.</p>
  
  <p>How can I achieve this in MDL Class.</p>