Center Content Vertically on Vuetify

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>

Vuetify, how to center content and strech a column

As Tingsen Cheng mentioned, you can add flex styles to your v-col to achieve vertical center. Additionally, as of Vuetify 2.3.10, you can make use of their flex helper which gives you utility classes to control your layout with ease.

So instead of using inline style, you can use just use something like this: class="d-flex justify-center align-center"

<v-row align="stretch">
  <v-col 
    cols="6"
    style="background-color: #FF5000;"
    class="d-flex justify-center align-center"
  >
    <v-btn>...</v-btn>
  </v-col>
  <v-col cols="6" style="background-color: #5fc3c7;">...</v-col>
</v-row>

Here is a demo at codesandbox.

I cant vertically align items in center #vuetify

One solution would be to move the image out of the container. Then use style="height: 100%;" align-center d-flex on container to make it fill image area and display contents vertically in the middle. Also you might want to consider image max-height="100vh" to prevent scrolling on smaller screens.

new Vue({  el: '#app' })

<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">  <template>    <div class="home">      <v-img src="https://images.unsplash.com/photo-1562696482-77619dec0ae7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" max-height="100%">      <v-container style="height: 100%;" align-center d-flex fluid class="pa-0">          <v-layout align-center column>            <v-flex class="mb-2">              <span class="primary--text text-uppercase display-3 font-weight-thin">List</span>              <span class="white--text text-uppercase display-3 font-weight-thin">Series</span>            </v-flex>            <v-flex class="mb-4">              <h4 class="subheading grey--text">Follow the series you've been watching or are still watching!</h4>            </v-flex>            <v-flex>              <v-btn color="primary" depressed flat outline to="/add">                go to add              </v-btn>            </v-flex>          </v-layout>        </v-img>      </v-container>      </div>  </template></div>

How to vertically align the content in Vuetify version 1.5

Your FirstTile html could be something like this. align-center will fill the space vertically.

<v-container bg fill-height grid-list-md text-xs-center>
        <v-layout row wrap align-center>
          <v-flex>
              <v-card-text >Profit/loss </v-card-text>
             <v-icon
                x-large
               color="white"
             > swap_vert
            </v-icon>
          </v-flex>          
        </v-layout>             
</v-container>

Vue Vuetify center horizontally and vertically

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

Best way for center v-card horizontally and vertically with vuetify

Try these.

 <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-container fill-height fluid>
  <v-row align="center"
      justify="center">
      <v-col></v-col>
  </v-row>
</v-container>

Center Content Vertically on Vuetify