如何使用 Vuetify 将 v-card 放在页面中心答案

【问题标题】：How to put a v-card in the center of the page with Vuetify如何使用 Vuetify 将 v-card 放在页面中心
【发布时间】：2020-03-17 18:05:41
【问题描述】：

我的目标是在页面中心放置一张 v-card。我正在使用 Vuetify。此代码应该可以工作，但不能：

<template>
  <v-container fill-height>
    <v-row align="center" justify="center">
      <v-col>
        <v-card flat color="grey" class="lighten-3" max-width="500px">
          <v-card-title>{{ title }}</v-card-title>
          <v-card-text>
            <slot name="content"></slot>
          </v-card-text>
          <v-card-actions>
            <slot name="actions"></slot>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

我做错了什么？请帮忙。

更多上下文：我在多个地方将它用作 BaseComponent。这是一个例子：

<template>
  <div>
    <BaseInfoMenu title="Title">
      <template slot="content">
        //content
      </template>
      <v-btn slot="actions">...</v-btn
  </div>
  //Some invisible divs 
</template>

【问题讨论】：

标签： vuetify.js

【解决方案1】：

我解决了。 BaseInfoMenu 组件周围的 div 是问题所在。我删除了它。此外 align="center" 必须进入 v-col 或删除 v-col。功能代码如下所示：

<template>
  <v-container fill-height>
    <v-row justify="center" align="center"> //No v-col
      <v-card flat color="grey" class="lighten-3" max-width="500px">
        <v-card-title>{{ title }}</v-card-title>
        <v-card-text>
          <slot name="content"></slot>
        </v-card-text>
        <v-card-actions>
          <slot name="actions"></slot>
        </v-card-actions>
      </v-card>
    </v-row>
  </v-container>
</template>

上下文是

<template>
  <BaseInfoMenu title="Title"> //no div
    <template slot="content">
      //content
    </template>
    <v-btn slot="actions">...</v-btn
  //Some invisible divs 
</template>

【讨论】：