Vuetify - 制作带有居中文本的方形 v-card（两个轴）

Question

我正在尝试制作一张卡片文字在正方形中间居中的 v-card。我尝试使用 v-spacer 和 vuetify 附带的其他一些 CSS 类，但不幸的是，虽然文本保持水平居中，但我无法使其也垂直居中。

除了中间文本的垂直居中之外，这段代码几乎可以正常工作

  <v-container fluid>
    <v-row>
      <v-col cols="6" sm="4">
        <v-card rounded color="info">
          <v-responsive aspect-ratio="1">
            <v-card-title>
              Top left - correct
            </v-card-title>
            <v-card-text class="text-center white--text">
              middle center
            </v-card-text>
            <v-card-actions class="justify-center white--text">
              bottom center
            </v-card-actions>
          </v-responsive>
        </v-card>
      </v-col>
    </v-row>
  </v-container>

这是一个带有示例的 JS 小提琴：https://jsfiddle.net/mrpquke4/3/

尝试使用上面的示例调整浏览器窗口的大小，您将看到 v-card 在增长或缩小时保持方形（根据需要），文本保持水平居中（根据需要），文本未垂直居中（问题）。

JSFiddle：

期望的结果：

Answer 1

使用这个css：

.v-responsive__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: center; // this will make everything vertical center
    justify-content: space-between
}


.v-responsive__content > div {
    width: 100%;
}

您可以为任何 css 冲突命名空间类：

.my-card .v-responsive__content { ... }

Answer 2

您可以在v-col 上使用align-self（如果您想放在单独的行中，则可以在v-row 上使用align）用于水平方向，在v-col 上使用offset 用于垂直方向

  <v-row>
    <v-col align-self="center" cols="6">
      <v-card class="pa-3">align : start</v-card>
    </v-col>

    <v-col align-self="center" cols="6" offset="3">
      <v-card class="pa-3 text-center">align : center</v-card>
    </v-col>

    <v-col align-self="end" cols="6" offset="6">
      <v-card class="pa-3 text-end">align : end</v-card>
    </v-col>
  </v-row>

这里是更新的 jsfiddle：https://jsfiddle.net/tunzLcw5/