Vue Vuetify 水平和垂直居中

Question

我正在尝试将我的身份验证组件（v-card）水平和垂直居中。我尝试了各种解决方案，例如行上的justify=center 和align=center，v-容器上的填充高度，v-容器上的class="fill-height"，但它不起作用。我在这里做错了什么？

代码 ：

<script setup lang="ts">
import { useUserStore } from "../../stores/user";
const store = useUserStore();
</script>
<template>
        <v-card width="800" >
          <v-card-title>
            Authentication
          </v-card-title>
          <v-card-subtitle>
            login with username and password
          </v-card-subtitle>
          <v-card-text>
            <v-row>
              <v-col cols="12" md="6">
                <v-text-field v-model="store.username" label="Username"></v-text-field>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field v-model="store.password" label="Password"></v-text-field>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
</template>

<script setup lang="ts">
import Auth from "../components/auth/Auth.component.vue"

</script>
<template>
    <v-container>
    <v-row style="border:1px solid red;" fill-height>
      <v-col class="d-flex justify-center items-center">
        <Auth/>
      </v-col>
    </v-row>
    </v-container>
</template>

<template>
  <v-app>
    <v-main>
      <router-view></router-view>
    </v-main>
  </v-app>
</template>
<script setup lang="ts">

</script>

Answer 1

更新

检查我制作的这个codesanbox：https://codesandbox.io/s/stack71483246-center-login-p1u6zv?file=/src/views/Home.vue

看起来只需将类 fill-height 添加到根容器中，您就可以将其垂直居中。

<template>
   <v-container fluid class="fill-height">
      <v-row style="border:1px solid red;">
         <v-col class="d-flex justify-center">
            <Auth/>
         </v-col>
      </v-row>
   </v-container>
</template>

Answer 2

以下 sn-p 将使卡片在 Vuetify 3 的父级中垂直居中：

<v-row align="center" class="fill-height">
  <v-col>
    <v-card class="ma-3">
      ...
    </v-card>
  </v-col>
<v-row>