无法在css网格中居中子元素

Question

我的Angular应用的CSS结构是

顶级应用程序具有3行的CSS网格 -nav组件排在第一行 -content-component排在第二行 -footer排在第三排

.css-grid-container{
  height:100vh; /*height of the container is same ahs height of the view port.*/
  display: grid;
  grid-gap:20px;
  grid-template-columns: 1fr;  /* 1 columns*/
  grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaining is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}

app-nav-component {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}

app-content-component{
  grid-column: 1 / -1;
  grid-row: 2 / 3;
}

app-footer-component{
  grid-column: 1 / -1;
  grid-row: 3 / -1;
}

HTML是

<div class="body__div--background"  >
    <app-nav-component></app-nav-component>
    <app-content-component></app-content-component>
    <app-footer-component></app-footer-component>
  </div>

中间的内容组件是我要放置新组件的位置。 ContentComponent的{​​{1}}代码是

html

css是

<div id="content-div">
  <router-outlet></router-outlet>
</div>

假设以上组件充当其他组件的容器（导航栏和页脚始终保持不变）。现在，我有了另一个组件#content-div{ height:100%; display:grid; grid-template-columns: 1fr; /* 1 columns*/ grid-template-rows: 1fr; /*1 row*/ } 。我希望将HomeComponent放在HomeComponent内部的中心。我为此写的ContentComponent和html

css

css是

   <div class="homepage-component-css-grid-container" id="home-page-component">
  <app-practice-component></app-practice-component>
  <app-create-component></app-create-component>
</div>

我的问题是.homepage-component-css-grid-container{ display: grid; grid-gap:20px; grid-template-columns: 1fr 1fr; /* 2 columns*/ } #home-page-component{ align-self:center; /*center of the content component*/ grid-column: 1 / -1; grid-row: 1 / -1; } app-practice-component{ grid-column: 1 / 2; align-self: center; justify-self:end; } app-create-component{ grid-column: 2 / 3; align-self: center; justify-self:start; } 没有显示在中间。参见下面的图片。有趣的是，我注意到，如果通过浏览器的调试工具在HomeComponent中手动添加align-self:center，则reboot.scss会移到中心。但是HomeComponent不是我的文件。如何将reboot.scss与HomeComponent

对齐

图片1-我正在观察的行为。 center不在中心

图片2-如果我在HomeComponent中添加align-self:center

Answer 1

我通过在#content-div中再添加1行来解决了这个问题

问题（在图片中也可见）是<router-outlet>。 ContentComponent的html具有<router-outlet>，Angular将在其中放置其他组件（例如HomePageComponent）。 Angular这样做的方法是保留<router-outlet>标签，并在html中的下方添加组件特定的标签。因此，网格需要同时为组件标签和组件标签提供空间

新代码

#content-div{
  height:100%;
  display:grid; 
  grid-template-columns: 1fr;  
  grid-template-rows: auto 99%; 
}

我还在height:100%中添加了homepage-component-css-grid-container规则，否则网格的高度仅达到其子代的高度

.homepage-component-css-grid-container{
  display: grid;
  grid-gap:20px;
  grid-template-columns: 1fr 1fr;  /* 2 columns*/
  height:100%;
}

我不再需要home-page-component，因为align-self和justify-self中的app-practice-component和app-create-component规则进行了正确的对齐