Angular Router 元素中的 CSS Center 元素答案

【问题标题】：CSS Centre element in Angular Router elementAngular Router 元素中的 CSS Center 元素
【发布时间】：2019-07-27 20:57:07
【问题描述】：

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

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>

【问题讨论】：

你为什么使用这个选择器？ router-outlet ~ * ?
你到底想做什么？您正在尝试对齐“它”，但“它”是什么？以哪种方式在哪里对齐？
Router-outlet 不是可自定义的模板元素，您可以使用 router-outlet 之后的另一层来实现这一点。但是您可以简单地自定义您的主类。我还建议您检查这个 SO 主题，stackoverflow.com/a/34645811/5955138

标签： javascript html css angular web

【解决方案1】：

使用 CSS Flex Box 将项目对齐到中心。

您不能通过在 css 中使用 router-outlet 标记名称来居中 router-outlet，因为 router-outlet 不是可自定义的模板元素。不要使用router-outlet 标记名称，而是尝试用div 包装它并将弹性框样式应用于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>

【讨论】：

非常感谢@Bear Nithi。你怎么知道我们必须使用对齐内容并证明对齐？能不能详细一点！再次感谢:)
css-tricks.com/snippets/css/a-guide-to-flexbox 这个 flexbox 备忘单将比我能解释的更多。它是 flexbox 的好材料。

【解决方案2】：

考虑使用引导程序 Flex 属性，它们让您的生活更轻松，并允许网站在分辨率和不同屏幕尺寸方面非常敏感。

有用的链接 - Bootstrap Flex

如何居中的示例 -

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

【讨论】：

【解决方案3】：

你的问题描述的有点模糊，我会尽量回答。如果我理解错了，请评论。

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

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

解决方案

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 */
}

这是可能的，即使我不建议你这样做。根据包装元素设计样式可能是更好的方法。

【讨论】：