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包装它，并将flex box样式应用于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>

Answer 2

您的问题描述得有些含糊，无论如何我都会尝试回答。如果我弄错了，请发表评论。

据我了解，您尝试水平对齐router-outlet标签的同级容器。

为什么不起作用？
路由器出口没有定义的display属性。因此，其宽度和高度为0px，并且您无法根据0px width元素将另一个容器居中。

解决方案

router-outlet {
  display: block;
}

这使您可以进行以下操作：

<div> <!-- some outer element -->
  <router-outlet>
  <div #center-me>CENTER ME</div>
</div>

router-outlet ~ #center-me {
  margin: auto; /*  example if center-me is a block-level element */
}

可能的是，即使我不建议您这样做。按照包装元素的样式可能是更好的方法。

Answer 3

考虑使用Bootstraps Flex属性，它们使您的生活更加轻松，并使网站在分辨率和不同屏幕尺寸方面反应灵敏。

有用的链接-Bootstrap Flex

如何使某物居中的示例-

<div class="d-flex w-100>
  <div class="d-flex align-items-centre justify-content-between">
    Hello World!
  </div>
</div>