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

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> 时，我得到的视图所有 flex 项目都垂直对齐到顶部，这是我的目标，但它们没有水平对齐到中心，在右侧（第 1 张图片中显示问号的位置）。

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

同样，我需要它们与顶部垂直对齐并水平居中。如何实现？

Answer 1

我认为您只需要在 v 容器上使用 fill-height，可能还需要一个 fluid。

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

Answer 2

用 v-content 标签替换您的主标签。我有同样的问题。如果您在 v-content 标签而不是 main 标签中使用 Router wrap router-view 。您可以在 Vuetifys 的文档中找到示例 Vuetify

Answer 3

我会说：

<v-container fill-height justify-start>

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

Can't align container to the top of page and center it horizontally

flexbox

vuetify.js