Vue2+Vuetify2代码迁移至Vue3+Vuetify3后渲染异常求助

原代码在**Vue 2（^2.6.10）+ Vuetify 2（^2.1.14）环境下可正常渲染，卡片能在视差组件内居中显示。切换到Vue 3（^3.4.31）+ Vuetify 3（^3.6.14）**后，卡片无法居中，调整边距等操作无效。

原代码 #

<template>
  <v-main>
    <v-app-bar
      clipped-left
      app
      color="white"
      elevate-on-scroll
      style=" border-bottom: thin solid rgba(0, 0, 0, 0.12) !important;"
    >
      <v-toolbar-title class="headline text-uppercase">
        <img :src="appLogo" alt="MyPath" height="45px" class="mt-1" />
      </v-toolbar-title>
      <v-spacer />
      <a href="http://www.libero.it/" target="_blank">
        <img :src="mpwLogo" alt="MyPath" height="35px" />
      </a>
    </v-app-bar>
    <section>
      <v-parallax src="../../../public/img/material.jpg" height="600">
        <v-layout column align-center justify-center class="white--text">
          <v-card outlined width="450px">
            <v-card-text>
              <div class="text-center">
                <img :src="appLogo" class="mb-3 text-center" width="90" />
              </div>
              <h2 class="text-center">Accedi a MyBadge</h2>
              <h2 class="mb-3"></h2>
              <!-- qui-->
            </v-card-text>
          </v-card>
        </v-layout>
      </v-parallax>
    </section>
    <v-divider />
    
    <StaticFooter />
  </v-main>
</template>

<script>
import AppVariables from "../AppVariables";
export default {
  data() {
    return {
      mpwLogo: AppVariables.secondaryLogo,
      appLogo: AppVariables.mainLogo,
    };
  },
};
</script>

问题表现 #

• 旧版本正常效果：卡片在视差组件内部垂直、水平方向均居中
• 新版本异常效果：卡片偏离视差组件中心，无法保持居中

解决方案 #

Vuetify3 废弃了v-layout组件，改用v-container+v-row+v-col的布局体系，同时v-parallax的内部布局逻辑也有调整，修改后的代码如下：

<template>
  <v-main>
    <v-app-bar
      clipped-left
      app
      color="white"
      elevate-on-scroll
      style="border-bottom: thin solid rgba(0, 0, 0, 0.12) !important;"
    >
      <v-toolbar-title class="headline text-uppercase">
        <img :src="appLogo" alt="MyPath" height="45px" class="mt-1" />
      </v-toolbar-title>
      <v-spacer />
      <a href="http://www.libero.it/" target="_blank">
        <img :src="mpwLogo" alt="MyPath" height="35px" />
      </a>
    </v-app-bar>
    <section>
      <v-parallax src="../../../public/img/material.jpg" height="600">
        <!-- 替换废弃的v-layout -->
        <v-container fill-height>
          <v-row align="center" justify="center">
            <v-col>
              <v-card outlined width="450px" class="white--text">
                <v-card-text>
                  <div class="text-center">
                    <img :src="appLogo" class="mb-3" width="90" />
                  </div>
                  <h2 class="text-center">Accedi a MyBadge</h2>
                  <h2 class="mb-3"></h2>
                  <!-- qui-->
                </v-card-text>
              </v-card>
            </v-col>
          </v-row>
        </v-container>
      </v-parallax>
    </section>
    <v-divider />
    
    <StaticFooter />
  </v-main>
</template>

<script setup>
import AppVariables from "../AppVariables";
const mpwLogo = AppVariables.secondaryLogo;
const appLogo = AppVariables.mainLogo;
</script>

关键修改点 #

1. 移除废弃的v-layout，改用Vuetify3推荐的v-container+v-row+v-col布局组合
2. 给v-container添加fill-height属性，使其占满v-parallax的高度
3. 通过v-row的align="center"和justify="center"实现卡片的垂直水平居中
4. 脚本部分改用Vue3的<script setup>语法（符合新版本规范）
5. 移除冗余的text-center类，简化结构

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