alinear vista movil

src/pages/IndexPage.vue

@@ -26,17 +26,12 @@
       </q-avatar>
     </div>
   </div>
-  <div class="flex flex-center">
-    <q-form class="q-gutter-md" @click.once="recibeDatos()">
-      <div class="row" style="max-width: 198px">
-        <q-file
-          class="full-width q-mb-md"
-          outlined
-          v-model="imagen"
-          label="Avatar"
-        />
-      </div>
-      <div class="row">
+
+  <div class="row">
+    <div class="col-2"></div>
+    <div class="col">
+      <q-form class="q-gutter-md" @click.once="recibeDatos()">
+        <q-file outlined v-model="imagen" label="Avatar" class="q-py-md" />
         <q-input
           outlined
           v-model="name"
@@ -45,8 +40,7 @@
             (val) => (val != null && val.length >= 3) || 'Mínimo 3 caracteres',
           ]"
         />
-      </div>
-      <div class="row">
+
         <q-input
           outlined
           v-model="username"
@@ -57,20 +51,24 @@
             (val) => /^[A-Z0-9]+$/i.test(val) || 'Sólo letras o números',
           ]"
         />
-      </div>
-      <div class="row">
+
         <q-input
           outlined
           v-model="listaStore.pb.authStore.model.email"
           label="email"
           disable
         />
-      </div>
-    </q-form>
-    <div class="row q-mt-md q-mx-auto">
-      <div class="col">
-        <q-btn flat color="primary" label="Cancelar" @click="cargarDatos()" />
+      </q-form>
+      <div class="row q-mt-md q-mx-auto">
         <q-btn
+          class="col-6"
+          flat
+          color="primary"
+          label="Cancelar"
+          @click="cargarDatos()"
+        />
+        <q-btn
+          class="col-6"
           flat
           :disable="btnSaveDisable()"
           color="secondary"
@@ -79,32 +77,34 @@
         />
       </div>
     </div>
-    <q-dialog v-model="alertSave" persistent>
-      <q-card>
-        <q-card-section class="row items-center">
-          <q-avatar icon="warning" color="warning" text-color="white" />
-          <span class="q-ml-sm">Está seguro de guardar los datos?</span>
-        </q-card-section>
-
-        <q-card-actions align="right">
-          <q-btn
-            flat
-            label="No"
-            color="negative"
-            v-close-popup
-            @click="cargarDatos()"
-          />
-          <q-btn
-            flat
-            label="Guardar"
-            color="accent"
-            v-close-popup
-            @click="updateUser()"
-          />
-        </q-card-actions>
-      </q-card>
-    </q-dialog>
+    <div class="col-2"></div>
   </div>
+
+  <q-dialog v-model="alertSave" persistent>
+    <q-card>
+      <q-card-section class="row items-center">
+        <q-avatar icon="warning" color="warning" text-color="white" />
+        <span class="q-ml-sm">Está seguro de guardar los datos?</span>
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn
+          flat
+          label="No"
+          color="negative"
+          v-close-popup
+          @click="cargarDatos()"
+        />
+        <q-btn
+          flat
+          label="Guardar"
+          color="accent"
+          v-close-popup
+          @click="updateUser()"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 <script setup>
 import { ref, computed } from "vue";