ausrichten der eckigen Materialkarte in der Mitte der Seite

Ich habe ein Registrierungsskript erstellt, mit dem sich der Benutzer auf meiner Website anmelden kann. Nun habe ich das Problem, dass die eckige Materialkarte, in der die Anmeldeschnittstelle liegt, nicht im Mittelpunkt steht. Ich habe viele Dinge ausprobiert, darunter <center> und [layout-align = "center center"], aber es funktioniert immer noch nichts.

<md-content class="md-padding" layout-xs="column" layout="row">
    <div flex-xs flex-gt-xs="40" layout="column" layout-align="center center">
        <md-card class="card-40-center">
            <md-card-title>
                <md-card-title-text>
                    <span class="md-headline">Sign Up</span>
                </md-card-title-text>
            </md-card-title>
            <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" class="signup_form">
            <div class="md-padding" layout-align="center">
                <div layout="row">
            <md-input-container flex="100">
                <label>First name</label>
                <input>
            </md-input-container>
                <md-input-container flex="100">
                    <label>Last name</label>
                    <input>
                </md-input-container>
                    </div>
                <div layout="row">
                <md-input-container flex="100">
                    <label>Username</label>
                    <input>
                </md-input-container>
                <md-input-container flex="100">
                    <label>Email</label>
                    <input type="email">
                </md-input-container>
                    </div>
                <div layout="row">
                <md-input-container flex="100">
                    <label>Password</label>
                    <input type="password">
                </md-input-container>
                <md-input-container flex="100">
                    <label>Repeat Password</label>
                    <input type="password">
                </md-input-container>
                    </div>
                <div ng-controller="selectGender as ctrl">
                    <div layout="row">
                    <md-input-container flex="100" layout="column" layout-align="center">
                        <label>Gender</label>
                        <md-select ng-model="ctrl.userState">
                            <md-option
                                ng-repeat="state in ctrl.states"
                                value="{{state.abbrev}}"
                                ng-disabled="$index === 2"
                            >
                                {{state.abbrev}}
                            </md-option>
                        </md-select>
                    </md-input-container>
                        <div ng-controller="selectDate">
                            <div flex="100">
                                <md-datepicker
                                    ng-model="myDate"
                                    md-placeholder="Enter date"
                                ></md-datepicker>
                            </div>
                        </div>
                        </div>

                </div>
            </div>

            <md-card-actions layout="row" layout-align="center">
                <br>
                <center>
                    <md-button class="md-primary md-raised signup_button" type="submit">Sign Up</md-button>

                </center>
                </form>
            </md-card-actions>
            <md-card-content>

            </md-card-content>

        </md-card>
    </div>
</md-content>