如何在 <v-container> 中水平居中 <v-card>？

Question

我正在使用 VueJS 和 Vuetify 为个人项目制作一个简单的登录和注册页面，但我不知道如何将我正在使用的 v-card 水平居中。

我一直在寻找一种方法，但文档没有给出任何答案，而且我在这里找不到任何问题，所以我决定问它。这是我的代码：

<template>
    <v-container>
        <v-row class="text-center">
            <v-col cols="12">
                <v-img
                    :src="require('../assets/logo.png')"
                    class="my-3"
                    contain
                    height="200"
                />
            </v-col>

            <v-col cols="12">
                <h1 style="text-align:center">SelliBird</h1>
            </v-col>
            
            <v-container fluid>
                <v-card style="max-width: 50%;" class="elevation-4 mx-auto" dark>
                    <v-card-text class="text-center">
                        <v-col class="mb-4">
                            <h4 style="text-align:center" v-if="options.isLoggingIn">Log in to your customer portal</h4>
                            <h4 style="text-align:center" v-else>Crate a new account</h4>
                        </v-col>
                    </v-card-text>
                </v-card>
            </v-container>
        </v-row>
    </v-container>
</template>

<script>
export default {
    data(){
        return{
            options:{
                isLoggingIn: true
            }
        }
    }
}
</script>

下面是它现在的样子：

Answer 1

只需将margin: 0 auto 添加到 v-card 的样式属性中即可。