Environment: Nuxt + Vue 3.x + Vuetify 3.x

Below is my web page and pages/index.vue

<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>

I want to know how to center the system bar and app bar just like v-main and v-footer.