title: How to center an element in the center of the screen (without navbar)
body: <p>Im writting an Angular app, using Angular Material. I want to have a fixed navbar on the top and a main content area below. Something like this:</p>
  
  <pre><code>---------------------------------------
              FIXED NAVBAR
  ---------------------------------------
  |                                     |
  |         MAIN CONTENT AREA           |
  |                                     |
  |                                     |
  </code></pre>
  
  <p>In this main content area I want to be able to center a card just in the middle of the main area (not in the middle of the entire web, I dont want to take in account the navbar).</p>
  
  <p>My app.component.html:</p>
  
  <pre><code>&lt;mt-toolbar color="primary"&gt;&lt;/mt-toolbar&gt;
  
  &lt;div class="container"&gt;
     &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The app.component.css:</p>
  
  <pre><code>.container {
      width: 100%;
      margin-right: auto;
      margin-left: auto;
      margin-top: 64px;
   }
  </code></pre>
  
  <p>This is my code to the navbar:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;mat-toolbar class="fixed-top" color="primary"&gt;&lt;/mat-toolbar&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.fixed-top {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 2;
  }
  </code></pre>
  
  <p>Now, if the <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code> display a <code>LoginComponent</code> that contains only an element, how can I center this element just in the middle of the main area?</p>