javascript - Angular Router 元素中的 CSS Center 元素

Question

我已经尝试了很多并搜索了很多页面，但我似乎无法将其居中对齐:

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

.main{
    margin: 20px;
}

结构是这样的:

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

Answer 1

使用CSS Flex Box 将元素居中对齐。

您无法通过在 CSS 中使用 router-outlet 标签名称来使 router-outlet 居中，因为 router-outlet 不是可自定义的模板元素。不要使用 router-outlet 标签名称，而是尝试用 div 包装它，并将 flexbox 样式应用于 div 的类。

在下面的示例中，包装器 div 有一个名为 .main 的类。

justify-content: center 用于将元素对齐到中心。

.main {
  display: flex;
  align-items: center;
  justify-content-center;
   width: 90%;
}

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