Center content vertically on Vuetify
Update for new vuetify version
In v.2.x.x , we can use align and justify. We have below options for setup the horizontal and vertical alignment.
PROPS
align:'start','center','end','baseline','stretch'PRPS
justify:'start','center','end','space-around','space-between'
<v-container fill-height fluid> <v-row align="center" justify="center"> <v-col></v-col> </v-row></v-container>For more details please refer this vuetify grid-system and you could check here with working codepen demo.
Original answer
You could use align-center for layout and fill-height for container.
Demo with v1.x.x
new Vue({ el: '#app' }).bg{ background: gray; color: #fff; font-size: 18px;}<link href="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.js"></script><div id="app"> <v-app> <v-container bg fill-height grid-list-md text-xs-center> <v-layout row wrap align-center> <v-flex> Hello I am center to vertically using "align-center". </v-flex> </v-layout> </v-container> </v-app></div>
In Vuetify 2.x, v-layout and v-flex are replaced by v-row and v-col respectively. To center the content both vertically and horizontally, we have to instruct the v-row component to do it:
<v-container fill-height> <v-row justify="center" align="center"> <v-col cols="12" sm="4"> Centered both vertically and horizontally </v-col> </v-row></v-container>- align="center" will center the content vertically inside the row
- justify="center" will center the content horizontally inside the row
- fill-height will center the whole content compared to the page.
Here's another approach using Vuetify grid system available in Vuetify 2.x: https://vuetifyjs.com/en/components/grids
<v-container> <v-row align="center"> Hello I am center to vertically using "grid". </v-row></v-container>