How do I center my login window horizontally and place it right at the bottom of the page?

This is html.

<template name="atTemplate">
    <div class="card card-container">
        <div class="at-form">
            ...... <!-- embedded form using {{> atForm}} -->
        </div>
    </div>
</template>

      

        
        
        
      

    

Initially, without any css, the inline form gets stuck at the top left of the screen.

So when this is the css below, the login window is stuck on the bottom left screen. The change position: fixed

doesn't matter.

.card-container.card {    
  width: 262px;          
  position: absolute;
  bottom: 0px;
  margin-left:auto; 
  margin-right:auto;
}

      

        
        
        
      

    

The change position: absolute

box shifts to the horizontal middle but is now right at the top of the screen .

I tried many other suggestions, such as remove and replace in below. However, the login window is now in the top and horizontal middle of the screen.

  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;

      

        
        
        
      

    

I also see some solutions in nested css ... like the outer div being absolute and the inner div being relative or something, but I don't know if that might be helpful here.

Any help would be greatly appreciated.