无法将容器对齐到页面顶部并使其水平居中

Question

这是我的代码：

<template>
  <main>
    <v-container grid-list-xs class="text-xs-center">
      <v-layout row>
        <v-flex xs2 v-for="n in 6" :key="n">
          <v-card tile class="pa-1" dark color="error">
            <v-card-text>
              Some mildly interesting thing #{{ n }}
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
      <v-layout row>
        <v-flex xs12 >
          <v-card tile class="pa-2" dark color="secondary">
            <v-card-text>
              Well, that's interesting too!
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
        <v-layout row>
          <v-flex xs2 v-for="n in 6" :key="n">
            <v-card tile class="pa-1" color="warning">
              <v-card-text>
                And something more here #{{ n }}.
              </v-card-text>
              </v-card>
            </v-flex>
          </v-layout>
        </v-layout>
      </v-container>
    </main>
</template>

当使用<main>时，我会看到所有弹性项垂直对齐到顶部的视图，这是我的目标，但它们没有水平对齐中心，右边有一个间隙 - 手边（问号在第1张图片中显示）。

当我从代码中删除<main>并且<v-container>成为父元素时，项目会水平和垂直地转到中心（第2张图片）。

同样，我需要它们与顶部v-对齐并水平居中。怎么做到这一点？

Answer 1

用v-content标签替换主标签。我有同样的问题。如果您在v-content标记而不是主标记中使用Router wrap router-view。你可以在Vuetifys＆＃39;中找到例子。 docs Vuetify

Answer 2

我认为你只需要在v-container上使用 fill-height ，也可能需要流体。

<v-container fill-height grid-list-xs class="text-xs-center">

Answer 3

我会说：

<v-container fill-height justify-start>