Center content vertically on Vuetify

Question

Is there a way to center content vertically in Vuetify?

With the text-xs-center helper class, the content gets centered horizontally only:

<v-container grid-list-md text-xs-center>   <v-layout row wrap>      <v-flex xs12>        Hello      </v-flex>   </v-layout> 

From the API, I tested some other helper classes such as align-content-center but did not achieve the result.

Answer 1

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.

1. PROPS align : 'start','center','end','baseline','stretch'

2. 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/[email protected]/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/[email protected]/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>

Answer 2

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.