Vue cli versión @ 5.0.6 | Versión de Vuetify: vuetify@2.6.7

He usado vuejs+vuetify por un tiempo ahora y mi mente simplemente está desconcertada, estoy seguro de que todos los contenidos de vuejs/vuetify no están configurados como centrados de manera predeterminada. He creado un nuevo proyecto y no he tocado ninguna configuración de formato o tema.

Aquí está mi código para una página de inicio de sesión simple:

 <template> <div> <v-icon x-large style="font-size: 125px" > mdi-account </v-icon> <!-- login form card --> <v-card max-width="525px"> <v-container> <v-form ref="login"> <v-card-title> <h1> Login </h1> </v-card-title> <v-text-field label="Email" outlined /> <v-text-field label="Passwrd" outlined /> <v-spacer></v-spacer> <v-btn> Login </v-btn> </v-form> </v-container> </v-card> </div> </template> <script> export default { // } </script> <style> </style>

El ícono ya está centrado en la página sin configurar ningún estilo, y cada vez que cambio el tamaño de mi tarjeta, cambia de tamaño pero se desplaza hacia el lado izquierdo de la página.