How can i center a in the middle of the screen in Angular 9

Question

* I have a <mat-card> that i want to center in the middle of the screen I tried but it didn't center. It should looks good in toggle-device-toolbar because its for phones, i need some help with this.Im using angular-material and ng-bootstrap*

This is the code of the <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>

This is how it looks like right now

I wonder why use both Bootstrap and Material? Anyways, you may have to use FlexBox to align and justify the content to center. Try adding another div inside the .container div. ==>
... — Neelavar, Feb 19 '20 at 02:35
I use both because I'm new using material design and I'm trying to get used to it. Let me try what you said — Rinzler21, Feb 19 '20 at 02:43
There are many questions/answers on this topic. Here is one that is helpful: https://stackoverflow.com/questions/39697530/how-to-vertically-align-div-on-page-with-flexbox — Matt Nienow, Feb 19 '20 at 04:18

score 2 · Answer 1 · answered Feb 19 '20 at 04:33

2

You can do it with Flexbox

In the style of the component you have to add:

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

Also, if you change grid for flex it should work too.

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

answered Feb 19 '20 at 04:33

German Quinteros

1,870
9
33

Align the item horizontally but no vertically – Rinzler21 Feb 19 '20 at 12:43
Sorry, I didn't understand. Do you want to align the item only horizontally and not vertically? Or Does the solution I proved you only align the item horizontally and not vertically? – German Quinteros Feb 19 '20 at 13:16
I want it to be align both horizontally and vertically, but the code above only align horizontally – Rinzler21 Feb 19 '20 at 13:27
Do you try it with ```display: 'grid'``` instead of ```display: 'flex'``` ? – German Quinteros Feb 19 '20 at 13:28
Yes, in my code i realise that is already align horizontally and still needed to be vertically too – Rinzler21 Feb 19 '20 at 13:38

score 0 · Accepted Answer · answered Feb 20 '20 at 03:08

This is how i solve it

This is my css file


.center{
    width: 75%;
    margin: 10px auto;
  }

  .main-div{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

This is my html file

<div class="main-div">
    <mat-card class="z-depth center" flex="50" >
        <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 *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>

How can i center a in the middle of the screen in Angular 9

2 Answers2