How to center a login card in angular material

Question

I am having difficulty in centering my login card. This is what it looks like as of now:

This is my code: .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>

and this is in the CSS

.contains {
    text-align: center;
}

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

I am trying to learn css and/or flexbox and bootsrap. I have tried using styles from research but I still couldn't get it to work.

Please help me align in to the center of white background. I really appreciate your help.

Share as code snippet with the external libraries which you are using — Prabhakaran, Jan 11 '19 at 10:01
There are a few stackoverflow posts asking similar questions or the same question. Did you try https://stackoverflow.com/questions/45212473/how-to-center-align-card-in-angular-material-4?rq=1 ? — jasie, Jan 11 '19 at 10:02
Possible duplicate of [How to horizontally center a
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div) — Jonas Praem, Jan 11 '19 at 11:59

score 7 · Accepted Answer · answered Jan 11 '19 at 11:04

7

Aplly this css to the login card itself, i.e. to class="login-box".

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

As explaination, margin auto sets automatic suiting margin to horicontal center your div and its content of course so your mat-card.

I like to use margin-top: 15% for the space to the top of the site, which looks usually quite well. It will look like the following:

answered Jan 11 '19 at 11:04

L. Guthardt

1,990
6
22
44

Wow nice and short answer, works fine for me. Thank you. But how did you make that card? – Jan 11 '19 at 11:07
1

@JakubMaleček It is just a basic [Angular mat-card](https://material.angular.io/components/card/examples). – L. Guthardt Jan 11 '19 at 11:09

score 0 · Answer 2 · answered May 27 '21 at 23:02

0

I did it this way:

put the card inside a , then style it like this

.login-wrapper {
    max-width: 75%;
    width: 100%;
    margin: 2em auto;
}

answered May 27 '21 at 23:02

mkamal

199
2
6

score 0 · Answer 3 · answered Feb 15 '22 at 05:51

A wrapper div can be added to the login card. The wrapper div should be having display as flex. Assign width to 100vw and height to 100vh. Now to align it horizontally to center, use justify-contents: center and to vertically center it, use align-items: center. This will ensure that the content inside the wrapper is aligned to center.

 .wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
    }

How to center a login card in angular material

3 Answers3