html - 如何将 s router-outlet 的内容居中

Question

我正在尝试以 Angular 水平居中路由器 socket 的内容；但是，我使用的所有常规技巧都不起作用；在谷歌搜索所有常见的嫌疑人之后我试过:

• 显示: block ； margin :0 自动；
• 将它放在一个 div 中并使用上面的代码
• 尝试根据路线选择将在那里的组件，即使可能存在也可能不存在
• 我可以通过在正文中添加内边距使其居中，但它不会在所有屏幕尺寸上居中
• 我将一个 img 居中放置在组件上方，只是为了查看是否显示: block ； margin : 0 auto ；完全有效，它适用于 img 标签
• 使用了 depricated 'center' 标签
• 使用文本对齐:居中；

这是一个 Angular 2+ 元素

html:

<img src="https://i.ibb.co/6R6pcMm/MRG-Updated-Logo.jpg" />   <!--centered-->
<router-outlet></router-outlet>                               <!--not_centered-->

CSS:

img {
  display: block;
  margin: 0 auto;
}

router-outlet {
  display: block;
  margin: 0 auto;
}

Answer 1

HTML

<div class="center-me"><router-outlet></router-outlet></div> 

CSS

.center-me{
  display: block;
  margin: 0 auto;
}