title: How to center align card in angular material 4?
body: <p>I have created a sample angular 4 application with angular material.
  I'm trying to center the card in the view.
  But its not working.Below is the code</p>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;!--The content below is only a placeholder and can be replaced.--&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>login.component.html</strong></p>
  
  <pre><code>&lt;div  ng-cloak=""  layout-fill layout="column" style="background:green" layout-align="center"&gt;
      &lt;div flex="50" layout="row" layout-align="center"&gt;
        &lt;md-card flex="50"&gt;&lt;/md-card&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>login.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MdCardModule,MdInputModule } from '@angular/material';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>