angular資料カードをページの中央に配置する

Question

ユーザーが自分のサイトにサインアップできるようにする登録スクリプトを作成しました。今私が経験している問題は、angular登録カードが置かれているマテリアルカードが中心にないことです。<center>や[layout -align = "center center"]、それでも何も機能しません私のコード：

<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>

Answer 1

追加

layout-align="center center"

アウターに。

参照 http://codepen.io/anon/pen/vGewVG

Answer 2

正しい場所で</form>タグを閉じていません。

  <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>
            </form>

これをチェックしてください Plunker

これが repository です