Вертикальное выравнивание углового компонента в index.html - Использование display: grid

Question

Есть ли простой способ, которым я могу выровнять мой угловой компонент по вертикали?

Я использую display: grid для основного контейнера.

stackblitz

clock.component.html

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

clock.component.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%);
}