无法在 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的html代码是

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

css是

#content-div{
  height:100%;
  display:grid; 
  grid-template-columns: 1fr;  /* 1 columns*/
  grid-template-rows: 1fr; /*1 row*/
}

上述组件被假设为其他组件的容器（导航和页脚始终保持不变）。现在我有了另一个组件，HomeComponent。我希望将HomeComponent 放置在中心的ContentComponent 内。我为此写的html 和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>

css是

.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 没有显示在中心。见下图。有趣的是，我注意到如果通过浏览器的调试工具，我在reboot.scss 中手动添加align-self:center，那么HomeComponent 会移动到中心。但是reboot.scss 不是我的文件。我如何将HomeComponent 与center 对齐

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

Pic2 - 如果我在 reboot.scss 中添加 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%; 
}

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

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

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