Html 在Vuetify中使用填充高度属性时，移动设备上v形容器的中心内容

我已经为一个问题挣扎了一段时间，我希望能够发布一个修复程序，这个问题能够自行解决。不幸的是，情况并非如此。我在App.vue中使用vuetify元素时有以下基本代码：

<template>
  <v-app class="app" id="inspire">
    <v-content>
      <v-container class="fill-height" fluid>
        <v-row align="center" justify="center">
          <v-col class="text-center">
            <v-card outlined>
              <span>Source</span>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</template>

来源

这个看起来不错。但是，当我缩小到移动设备时，v-card并没有居中，而是向左推。见下图。当我删除容器上的“填充高度”属性时，所有内容看起来都是正确的，但我希望v型卡在页面上垂直居中。这是Vuetify问题吗？我在其他任何地方都找不到描述的确切问题。我的设置可能有问题吗

提前谢谢

杰罗恩

---

来自

.container.fill-height>.row

元素的

右边距：-12px

和

左边距：-12px

导致问题。似乎他们没有意识到，否则他们会添加某种

margin:auto

来解决它。希望能有所帮助。

右边距：-12px和左边距：-12px来自

.container.fill-height>.row

元素的

导致了问题。似乎他们没有意识到，否则他们会添加某种
margin:auto
来解决它。希望这能有所帮助。
似乎无法用重新创建，所以可能是页眉或页脚的内容？这很有趣。感谢您的测试！我简化了代码，并在帖子中对其进行了更新，但即使只有这一点，v-card还是关闭了-centered@Zim，如果查看此示例并打开开发工具并选择移动设备，会发生什么情况？对我来说，它被推到了左边。然而，当我删除填充高度时，它很好地居中抱歉，这就是我所指的示例：似乎无法用它重新创建填充高度，所以可能是页眉或页脚的内容？这很有趣。感谢您的测试！我简化了代码，并在帖子中对其进行了更新，但即使只有这一点，v-card还是关闭了-centered@Zim，如果查看此示例并打开开发工具并选择移动设备，会发生什么情况？对我来说，它被推到了左边。然而，当我删除填充高度时，它很好地居中抱歉，这就是我所指的示例：谢谢，我将尝试一下。所以你认为在css中添加margin:auto-to-row元素可以解决这个问题吗？我会尝试将它添加到那个元素中，看看这是否解决了你的问题！结构中的其他行需要负边距来正确显示谢谢，我将尝试一下。所以你认为在css中添加margin:auto-to-row元素可以解决这个问题吗？我会尝试将它添加到那个元素中，看看这是否解决了你的问题！结构中的其他行需要负边距才能正确显示