title: aligning angular material card in center of the page
body: <p>I made a Registration script which allows user to Sign Up to my site. Now the problem I am experiencing that the angular material card, in which the sign up interface lies, isn't at center. I've tried many things including <code>&lt;center&gt;</code> and [layout-align="center center"], still nothing works
  My code:</p>
  
  <pre><code>&lt;md-content class="md-padding" layout-xs="column" layout="row"&gt;
      &lt;div flex-xs flex-gt-xs="40" layout="column" layout-align="center center"&gt;
          &lt;md-card class="card-40-center"&gt;
              &lt;md-card-title&gt;
                  &lt;md-card-title-text&gt;
                      &lt;span class="md-headline"&gt;Sign Up&lt;/span&gt;
                  &lt;/md-card-title-text&gt;
              &lt;/md-card-title&gt;
              &lt;form action="&lt;?php echo $_SERVER['PHP_SELF']; ?&gt;" method="post" class="signup_form"&gt;
              &lt;div class="md-padding" layout-align="center"&gt;
                  &lt;div layout="row"&gt;
              &lt;md-input-container flex="100"&gt;
                  &lt;label&gt;First name&lt;/label&gt;
                  &lt;input&gt;
              &lt;/md-input-container&gt;
                  &lt;md-input-container flex="100"&gt;
                      &lt;label&gt;Last name&lt;/label&gt;
                      &lt;input&gt;
                  &lt;/md-input-container&gt;
                      &lt;/div&gt;
                  &lt;div layout="row"&gt;
                  &lt;md-input-container flex="100"&gt;
                      &lt;label&gt;Username&lt;/label&gt;
                      &lt;input&gt;
                  &lt;/md-input-container&gt;
                  &lt;md-input-container flex="100"&gt;
                      &lt;label&gt;Email&lt;/label&gt;
                      &lt;input type="email"&gt;
                  &lt;/md-input-container&gt;
                      &lt;/div&gt;
                  &lt;div layout="row"&gt;
                  &lt;md-input-container flex="100"&gt;
                      &lt;label&gt;Password&lt;/label&gt;
                      &lt;input type="password"&gt;
                  &lt;/md-input-container&gt;
                  &lt;md-input-container flex="100"&gt;
                      &lt;label&gt;Repeat Password&lt;/label&gt;
                      &lt;input type="password"&gt;
                  &lt;/md-input-container&gt;
                      &lt;/div&gt;
                  &lt;div ng-controller="selectGender as ctrl"&gt;
                      &lt;div layout="row"&gt;
                      &lt;md-input-container flex="100" layout="column" layout-align="center"&gt;
                          &lt;label&gt;Gender&lt;/label&gt;
                          &lt;md-select ng-model="ctrl.userState"&gt;
                              &lt;md-option
                                  ng-repeat="state in ctrl.states"
                                  value="{{state.abbrev}}"
                                  ng-disabled="$index === 2"
                              &gt;
                                  {{state.abbrev}}
                              &lt;/md-option&gt;
                          &lt;/md-select&gt;
                      &lt;/md-input-container&gt;
                          &lt;div ng-controller="selectDate"&gt;
                              &lt;div flex="100"&gt;
                                  &lt;md-datepicker
                                      ng-model="myDate"
                                      md-placeholder="Enter date"
                                  &gt;&lt;/md-datepicker&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;md-card-actions layout="row" layout-align="center"&gt;
                  &lt;br&gt;
                  &lt;center&gt;
                      &lt;md-button class="md-primary md-raised signup_button" type="submit"&gt;Sign Up&lt;/md-button&gt;
  
                  &lt;/center&gt;
                  &lt;/form&gt;
              &lt;/md-card-actions&gt;
              &lt;md-card-content&gt;
  
              &lt;/md-card-content&gt;
  
          &lt;/md-card&gt;
      &lt;/div&gt;
  &lt;/md-content&gt;
  </code></pre>