如何在角材料中居中登录卡

Question

我很难将登录卡居中。这是它现在的样子：

这是我的代码： .html

<!-- ============================================================== -->
<!-- Simple four boxes Row -->
<!-- ============================================================== -->
<div fxLayout="row" fxLayoutWrap="wrap">
    <!-- column -->    
    <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
        <mat-card>
            <mat-card-content>
                <!-- Row -->
                <div fxLayout="row" fxLayoutWrap="wrap">
                    <!-- column -->
                    <div fxFlex.gt-sm="50" fxFlex.gt-xs="50" >
                        <div class="contains">
                            <div class="login-box">
                                    <mat-card class="mat-elevation-z2" style="background-color: #26C6DA">
                                            <mat-card-header style="background-color: teal; color: whitesmoke;">Login</mat-card-header>
                                            <mat-card-content>
                                              <form class="form my-2 my-lg-0" #loginForm="ngForm" (ngSubmit)="login()">
                                                <mat-form-field>
                                                  <input type="text" class="text-white" placeholder="Username" name="username" [(ngModel)]="model.username" required matInput/>
                                                </mat-form-field>
                                                <mat-form-field>
                                                  <input type="password" placeholder="Password" name="password" [(ngModel)]="model.password" required matInput/>
                                                </mat-form-field>
                                                <button
                                                  type="submit"
                                                  mat-raised-button
                                                  class="btn btn-primary btn-sm btn-block"
                                                  [disabled]="!loginForm.valid"
                                                >
                                                  Submit
                                                </button>
                                              </form>
                                            </mat-card-content>
                                          </mat-card>
                                </div>

                        </div>
                        <br/><br/>
                    </div>
                </div>      
            </mat-card-content>
        </mat-card>
    </div>
    <!-- column -->    
</div>

这是在 CSS 中

.contains {
    text-align: center;
}

.login-box, .register-box {
    display: inline-block;
    margin: auto;
    width: 75%;
}.login-page, .register-page {
    background: #d2d6de;
}

我正在尝试学习 css 和/或 flexbox 和 bootsrap。我曾尝试使用研究中的样式，但我仍然无法让它发挥作用。

请帮我对齐到白色背景的中心。我真的很感谢你的帮助。

Answer 1

将此 css 应用到登录卡本身，即class="login-box".

.login-box{
    margin: auto;
    margin-top: 15%;
}

作为解释，margin auto 设置自动匹配边距以水平居中您的 div 及其内容，当然也是您的 mat-card。

我喜欢margin-top: 15%用于网站顶部的空间，通常看起来很好。它将如下所示：