aligning angular material card in center of the page
<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>