Vuetify栅格系统无法实现元素水平对齐的问题求助

• 你给v-row设置的justify="center"只会作用于v-row直接子元素（也就是v-col）的对齐，不会影响v-col内部的内容对齐
• 包裹logo和比分的v-col默认宽度100%，内部内容默认左对齐，没有设置居中规则
• 模板插值语法中不需要加this前缀，属于冗余写法

给所有包含logo、比分的v-col添加Vuetify内置的text-center类即可，修改后代码如下：

<template>
  <v-container fluid>
    <v-row class="ma-5" dense align="center" justify="center">
      <v-col cols="5">
        <v-card elevation="10" outlined>
          <v-container>
            <v-row align="center" justify="center" no-gutters>
              <v-col class="text-center">
                <v-img
                    src="@/assets/home.png"
                    width="65%"
                />
              </v-col>
            </v-row>
            <v-row justify="center" align="center" no-gutters>
              <v-col class="text-center">
                <span style="font-size: 16rem">
                  {{ homeScore }}
                </span>
              </v-col>
            </v-row>
          </v-container>
        </v-card>
      </v-col>
      <v-col cols="2" class="text-center">
        <v-img
            src="@/assets/vs.png"
        />
      </v-col>
      <v-col cols="5">
        <v-card elevation="10" outlined class="">
          <v-container>
            <v-row align="center" justify="center" no-gutters>
              <v-col class="text-center">
                <v-img
                    src="@/assets/away.png"
                    width="65%"
                />
              </v-col>
            </v-row>
            <v-row justify="center" align="center" no-gutters>
              <v-col class="text-center">
                <span style="font-size: 16rem">
                  {{ awayScore }}
                </span>
              </v-col>
            </v-row>
          </v-container>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

内容的提问来源于stack exchange，提问作者vMysterion