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.

Solution 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>

Solution 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.

Solution 3

Still surprised that no one proposed the shortest solution with align-center justify-center to center content vertically and horizontally. Check this CodeSandbox and code below:

<v-container fluid fill-height>
  <v-layout align-center justify-center>
    <v-flex>
      <!-- Some HTML elements... -->
    </v-flex>
  </v-layout>
</v-container>

Solution 4

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>

Solution 5

FOR CARDS: Concise and works in v2+. This will get you a v-card with centered content HORIZONTALLY and VERTICALLY:

<v-card class="d-flex align-center justify-center"  min-height="250">
    Content here...
</v-card>

codepen

View more solutions

Comments

[Billal Begueradj]

I just want to add a note: align-center center works only if fill-height is set for the container. Thank you

[David North]

justify is for horizontal alignment and align is for vertical alignment. So you should have align="center" and not justify="center"

[nelson6e65]

I worth to mention that, in order to this to work, you have to use children of <v-app> directly. If you have some <divs>s as root of v-footer|v-content, this will fail (for example, if you're using layouts to reuse components as pages and you need a root <div> for your <template>).

[Carson McManus]

Note that this is using the old grid system, the new one uses v-row and v-col. See the answer by Billal: stackoverflow.com/a/59089655/3315164

[Biskit1943]

@nelson6e65 how exactly do you solve this? I can't center my v-flex :(

[babis21]

The fill-height was the missing part for me, it's not in the docs: vuetifyjs.com/en/api/v-container. Upvoting, cheers guys!

[Emobe]

When using multiple rows this seems to space the rows out evenly rather than putting them in the center vertically due to flex: 1 1 100% being applied to the rows when fill-width is used on the container