Блог

В моем приложении Vue / Vuetify я определил следующий макет с верхней навигацией, основной областью содержимого и нижним колонтитулом

 <template>
  <div>
    <my-nav />
    <v-main>
      <slot />
    </v-main>
    <my-footer />
  </div>
</template>
 

Когда я применяю этот макет к компоненту с этим шаблоном

 <template>
  <v-container fill-height fluid>
    <v-row justify="center" align="center">
      <v-col sm="8" md="6" lg="4">
        <h1>horizontally and vertically centered</h1>
      </v-col>
    </v-row>
  </v-container>
</template>
 

Я ожидаю <h1> , что он появится в середине экрана, но вместо этого он появляется вверху.

Причиной проблемы является <v-container> то, что он не заполнил высоту окна просмотра (он имеет только ту высоту, которую он переносит.

Если я удалю верхний и нижний колонтитулы из макета, т.Е. Изменю его на

 <template>
  <v-main>
    <slot />
  </v-main>
</template>
 

Тогда все работает так, как ожидалось. Как я могу вертикально центрировать свой компонент в окне просмотра (не удаляя навигацию и нижний колонтитул из макета)?