如何在Nuxt+Vue3+Vuetify3项目中居中v-app-bar与v-system-bar

环境：Nuxt + Vue 3.x + Vuetify 3.x

你当前尝试给v-system-bar和v-app-bar单独设置宽度与margin来实现居中，但受Vuetify组件默认布局特性影响，效果未达预期。以下是修正方案：

原始代码 #

<script setup lang="ts">
</script>

<template>
    <v-app style="width: 800px;margin: auto;" class="border-red ">
    <v-system-bar style="width: 800px;margin: auto;">System bar</v-system-bar>
    <v-app-bar  class="border-blue " style="width: 800px;margin: auto;">
      App Bar <v-app-bar-title>APP TITLE</v-app-bar-title>
    </v-app-bar>
    <v-main>
      <v-container >
        <h1>HELLO MAIN</h1>
      </v-container>
    </v-main>
    <v-footer>
      FOOTER
    </v-footer>
  </v-app>
</template>

<style scoped>
.border-red {
  border: 5px solid red;
}

.border-blue {
  border: 5px solid blue;
}
</style>

修正方法 #

1. 移除v-system-bar和v-app-bar上的自定义宽度与margin样式，让它们继承父容器v-app的布局规则
2. 确保v-app的居中样式生效，内部组件会自动对齐容器

修改后的代码 #

<script setup lang="ts">
</script>

<template>
  <v-app class="border-red mx-auto" style="max-width: 800px;">
    <v-system-bar>System bar</v-system-bar>
    <v-app-bar class="border-blue">
      App Bar <v-app-bar-title>APP TITLE</v-app-bar-title>
    </v-app-bar>
    <v-main>
      <v-container>
        <h1>HELLO MAIN</h1>
      </v-container>
    </v-main>
    <v-footer>
      FOOTER
    </v-footer>
  </v-app>
</template>

<style scoped>
.border-red {
  border: 5px solid red;
}

.border-blue {
  border: 5px solid blue;
}
</style>

说明 #

• mx-auto是Vuetify内置的水平margin自动类，替代自定义的margin: auto，更贴合框架规范
• max-width:800px限制应用容器的最大宽度，内部所有组件（包括v-system-bar、v-app-bar、v-main和v-footer）都会在这个容器内自动居中对齐
• 移除组件单独的宽度设置后，组件会自动填充父容器宽度，避免布局错位

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