Как центрировать карточку входа в угловой материал

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%;
}

Как и объяснение , на полях автоматически устанавливается маржа соответствия по горизонтали, центрирующая ваш div и, конечно же, его содержимое, таким образом, ваша мат-карта.

Мне нравится использовать margin-top: 15% для пробела в верхней части сайта, который обычно выглядит довольно хорошо. Это будет выглядеть следующим образом: