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

Fixed it by using Very simple Flex

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

and wrapping everything with a class

  
    

        
        
    
  
  
    

      
    
    
  
  
    Login