css - 我怎样才能居中在 Angular 9 的屏幕中间

Question

* 我有一个<mat-card>我想在我试过的屏幕中间居中但它没有居中。它应该看起来不错，toggle-device-toolbar因为它适用于手机，我需要一些帮助。我正在使用angular-material和ng-bootstrap*

这是代码<mat-card>

<div class="container ">
    <mat-card>
    <mat-radio-group aria-label="Select an option" [(ngModel)]="radio_btn">
        <mat-radio-button  [value]="true" >Admin</mat-radio-button>
        <mat-radio-button [value]="false">User</mat-radio-button>
    </mat-radio-group>   
        <div class="row justify-content-center" *ngIf="radio_btn==true;else form2">
            <form class="example-form " [formGroup]="loginForm" (ngSubmit)="send()">
                <mat-form-field class="example-full-width">
                    <input matInput formControlName="Identifier" placeholder="User" >
                </mat-form-field><br>
                <div *ngIf="loginForm.get('Identifier').hasError('Identifier') && loginForm.get('Identifier').touched">Introduce an email</div><br>
                <mat-form-field class="example-full-width">
                    <input matInput formControlName="Password" placeholder="Password" type="password">
                </mat-form-field><br>
                <div *ngIf="loginForm.get('Password').hasError('Password') && loginForm.get('Password').touched">Introduce the correctly password</div><br>
                <button mat-raised-button [disabled]="loginForm.invalid" class="colour_button " type="submit">Login 1</button>
            </form>
        </div>
</mat-card>
</div>

这就是现在的样子

标签： cssangularbootstrap-4angular-materialng-bootstrap

Answer 1

你可以用Flexbox做到这一点

在组件的样式中，您必须添加：

.container {
  display: flex; 
  align-items: center; 
  justify-content: center;
}

此外，如果你改变grid它flex也应该工作。

.container {
  display: grid; 
  align-items: center; 
  justify-content: center;
}