html - 在 index.html 中垂直对齐 Angular 组件 - 使用显示 :grid

Question

有没有一种简单的方法可以垂直对齐显示的 Angular 组件？

我正在使用 display: grid 作为主容器。

stackblitz

时钟组件.html

<div class="container">
  {{time | date: 'HH:mm:ss'}}
</div>

时钟组件.css

:host {
  margin: auto;
}

app.component.html

<div class="container">
  <app-clock></app-clock>
</div>

app.component.css

.container {
  display: grid;
  height: 100%;
}

Answer 1

不确定您是否更喜欢 flexbox 解决方案，但这是我最近在这种情况下开始使用的解决方案:

.container {
    display: flex;
    align-items: center;
    height: 100%; /* make sure .containers's parents also have fixed height */
}

:host {
    display: inline-block;
    flex: 1;
}

此外，还有一种定位方法，在您的情况下很常见:

.container {
    position: relative;
    height: 100%;
}

:host {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}