CSS Centre element in Angular Router element

I have tried a lot already and searched many pages but I can't seem to center align it:

router-outlet ~ * {
  position: absolute;
  height: 100%;
  width: 90%;
  display: block;
  margin: auto;
}

.main{
    margin: 20px;
}

The structure is like this:

<mat-sidenav-content>
  <div class="main">
    <router-outlet></router-outlet>
  </div>