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

Question

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

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

<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的style属性中，就可以了。