Vue Vuetify center horizontally and vertically - vue.js

Question

I'm trying to center my auth component (v-card) horizontally and vertically. I tried all kinds of solutions like justify=center and align=center on the rows, fill-height on the v-container, class="fill-height" on the v-container but its not working. What am I doing wrong here ?
Code :
<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

Update
Check this codesanbox I made: https://codesandbox.io/s/stack71483246-center-login-p1u6zv?file=/src/views/Home.vue
Looks like by just adding the class fill-height to the root container you can center it vertically.
<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

The following snippet will center the card vertically in the parent in Vuetify 3:
<v-row align="center" class="fill-height">
<v-col>
<v-card class="ma-3">
...
</v-card>
</v-col>
<v-row>