How to center mat-card in angular materials?

Question

I have a login card that I designed using angular materials, whenever I run it on the page the content sticks to the left of the page.

I tried using flex

Answer 1

Please try below css methods.

1. first way.

   .example-card{ display:inline-block; }

Then create one cover div for "mat-card". Give a class name for cover div like "mat-card-cvr".

.mat-card-cvr{
   width: 100%;
   text-align:center;
}

2.second way.

.example-card{
    margin: 0 auto;
    width: 40%;
}

3. Third way.

   .example-card{ margin: 0 auto; width: 40%; display: inline-block; vertical-align: middle; }

Then create one cover div for "mat-card". Give a class name for cover div like "mat-card-cvr".

 .mat-card-cvr{
       width: 100%;
       height: 500px;
       line-height: 500px;
       text-align: center;
    }

4. Fourth way.

   .mat-card-cvr{ top:50%; width:100%; text-align:center; position:fixed; }

   .example-card{ margin:0 auto; display:inline-block; }