在Vuetify中使用Fill-Height属性时，v容器在移动设备上的中心内容

Question

一段时间以来，我一直在努力解决问题，我希望能够发布修复程序，并且该问题能够解决。它并没有不幸。我的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卡未居中，而是向左推。参见下图。当我删除容器上的fill-height属性时，一切看起来都正确，但是我想将v卡垂直居中放置在页面上。这是Vuetify问题吗？我在其他任何地方都找不到这个确切的问题。我的设置中可能有问题吗？

谢谢！

耶隆

Answer 1

来自margin-right: -12px元素的margin-left: -12px和.container.fill-height > .row引起了问题。似乎他们没有意识到，否则他们将添加某种margin: auto来解决它。希望有帮助。