title: How to center mat-card in angular materials?
body: <p>I have a login card that I designed using angular materials, whenever I run it on the page the content sticks to the left of the page.</p>
  
  <p>I tried using <code>flex</code> and using <code>layout-align="center center"</code> but I still cannot bring the card to the center of the page</p>
  
  <p>What am I doing wrong ?</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;mat-card class="example-card" layout="row" layout-align="center center"&gt;
    &lt;mat-card-header&gt;
      &lt;div class="login-box-header" layout="row" layout-align="center center"&gt;
          &lt;img src="https://image.ibb.co/hDqa3p/codershood.png"&gt;
      &lt;/div&gt;
    &lt;/mat-card-header&gt;
    &lt;mat-card-content&gt;
      &lt;form class="example-form"&gt;
        &lt;table class="example-full-width" cellspacing="0"&gt;
          &lt;tr&gt;
            &lt;td&gt;
              &lt;mat-form-field class="example-full-width"&gt;
              &lt;input matInput placeholder="Username" [(ngModel)]="username" name="username" required&gt;
              &lt;/mat-form-field&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td&gt;&lt;mat-form-field class="example-full-width"&gt;
            &lt;input matInput placeholder="Password" [(ngModel)]="password"type="password" name="password" required&gt;
          &lt;/mat-form-field&gt;&lt;/td&gt;
        &lt;/tr&gt;&lt;/table&gt;
      &lt;/form&gt;
      &lt;mat-spinner [style.display]="showSpinner ? 'block' : 'none'"&gt;&lt;/mat-spinner&gt;
    &lt;/mat-card-content&gt;
    &lt;mat-card-actions&gt;
      &lt;button mat-raised-button (click)="login()" color="primary"&gt;Login&lt;/button&gt;
    &lt;/mat-card-actions&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p>and here is the content still not centered:</p>
  
  <p><a href="https://i.stack.imgur.com/Q09Is.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Q09Is.png" alt="enter image description here"></a></p>