[Vuejs]-Vue Vuetify center horizontally and vertically

by

0👍

✅

Update

Check this codesanbox I made: https://codesandbox.io/s/stack71483246-center-login-p1u6zv?file=/src/views/Home.vue

Looks like by just adding the class fill-height to the root container you can center it vertically.

<template>
   <v-container fluid class="fill-height">
      <v-row style="border:1px solid red;">
         <v-col class="d-flex justify-center">
            <Auth/>
         </v-col>
      </v-row>
   </v-container>
</template>

Preview

0👍

The following snippet will center the card vertically in the parent in Vuetify 3:

<v-row align="center" class="fill-height">
  <v-col>
    <v-card class="ma-3">
      ...
    </v-card>
  </v-col>
<v-row>

Leave a comment