Center content vertically on Vuetify

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
  • 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:

    <v-row align="center">
        Hello I am center to vertically using "grid".

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"

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' 
    background: gray;
    color: #fff;
    font-size: 18px;
<link href="[email protected]/dist/vuetify.min.css" rel="stylesheet" />
<script src=""></script>
<script src="[email protected]/dist/vuetify.min.js"></script>

<div id="app">
      <v-container bg fill-height grid-list-md text-xs-center>
        <v-layout row wrap align-center>
            Hello I am center to vertically using "align-center".