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

Question

I'm trying to horizontally center the content of a router-outlet in angular; However all the regular tricks I am using are not working; after searching google for all the usual suspects i tried:

• display: block; margin: 0 auto;
• placing it in a div and using the above code
• trying to select the component that will be there depending on the route even though may or may not be there
• I can center it by adding padding to the body but it will then not be centered on all screen sizes
• I centered a img above the component just to see if display: block; margin: 0 auto; works at all, it works on the img tag
• used the depricated 'center' tag
• used text-align: center;

this is an angular 2+ project

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;
}