title: Unable to position angular material mat-card using flex layout
body: <p>I am new to Flex Layout and just started studying how to use angular material with flex layout.</p>
  
  <p>I have implemented a simple login form in angular 2 using angular material. I want to use flex layout with angular material.</p>
  
  <p>I used mat-card in which i have aligned my form elements. But i want to position mat-card at the centre of my screen.Its getting centred horizontally but not vertically </p>
  
  <p>This is my code</p>
  
  <h2> myform.component.html</h2>
  
  <pre><code>&lt;div fxlayout="column" style="background: white;"&gt;
  
  &lt;mat-card fxFlex&gt;   
              &lt;form  (ngSubmit)="onSubmit(user.username,user.password)" #myForm="ngForm"&gt;
  
                                  &lt;p style="font-size: 30x;"&gt;Space Study&lt;/p&gt;
                                  &lt;p style="font-size: 14px;"&gt;Sign In&lt;/p&gt;
                                  &lt;mat-input-container class="form-row"&gt;
                                      &lt;span matTooltip="Username"&gt;
                                          &lt;input matInput placeholder=" " id="username" [(ngModel)]="user.username" name="username"&gt;
                                      &lt;/span&gt;
                                      &lt;span matPrefix&gt;&lt;mat-icon&gt;person&amp;nbsp;&amp;nbsp;&lt;/mat-icon&gt;&lt;/span&gt;
                                  &lt;/mat-input-container&gt;
  
                                  &lt;mat-input-container class="form-row"&gt;
                                      &lt;span matTooltip="Password"&gt;
                                          &lt;input matInput placeholder=" " id="password" [(ngModel)]="user.password" name="gpassword" [type]="hide ? 'password' : 'text'"&gt;
                                      &lt;/span&gt;
                                      &lt;span matPrefix&gt;&lt;mat-icon&gt;remove_red_eye&amp;nbsp;&amp;nbsp;&lt;/mat-icon&gt;&lt;/span&gt;
                                  &lt;/mat-input-container&gt;
  
                      &lt;button mat-raised-button color="primary" type="submit" mat-raised-button&gt;Login&lt;/button&gt;
  
                      &lt;mat-progress-bar mode="indeterminate" *ngIf="showprogressbar"&gt;&lt;/mat-progress-bar&gt;
              &lt;/form&gt;
  
  &lt;/mat-card&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <h2>myform.component.css</h2>
  
  <pre><code>mat-card{
      width: 350px;
      height: 400px;
      margin:auto;  
      vertical-align:middle;  
  }
  
  .form-row{
      display: flex;
  }
  
  .form-row input{
      flex: 1;
  }   
  </code></pre>
  
  <h2>Here is my output window</h2>
  
  <p><a href="https://i.stack.imgur.com/Mppgo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mppgo.png" alt="enter image description here"></a></p>
  
  <p>Can anybody please tell me how can i place my mat-card in the centre of my screen both horizontally and vertically.?</p>