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.

score 192 · Accepted Answer · edited May 31 '23 at 06:41

192

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>

edited May 31 '23 at 06:41

Merlijn Sebrechts

545
1
5
16

answered Sep 15 '18 at 10:41

Narendra Jadhav

10,052
15
33
44

22

I just want to add a note: `align-center` center works only if `fill-height` is set for the container. Thank you – Billal Begueradj Sep 15 '18 at 11:19
5

I worth to mention that, in order to this to work, you have to use children of `` directly. If you have some ``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 `
` for your `
– nelson6e65 Nov 11 '19 at 14:37
1

Note that this is using the old grid system, the new one uses `v-row` and `v-col`. See the answer by Billal: https://stackoverflow.com/a/59089655/3315164 – Carson McManus Dec 28 '19 at 16:52
1

@nelson6e65 how exactly do you solve this? I can't center my v-flex :( – Koschi13 Aug 28 '20 at 14:37
1

The `fill-height` was the missing part for me, it's not in the docs: https://vuetifyjs.com/en/api/v-container/. Upvoting, cheers guys! – babis21 May 24 '21 at 20:36
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 – Emobe Jun 09 '21 at 10:12

score 38 · Answer 2 · edited Jul 18 '20 at 21:07

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.

score 9 · Answer 3 · answered Jul 22 '21 at 16:01

9

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

answered Jul 22 '21 at 16:01

Richard Strickland

1,771
17
8

score 7 · Answer 4 · edited Jul 18 '20 at 21:07

7

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>

edited Jul 18 '20 at 21:07

Marcello B.

4,177
11
45
65

answered Aug 20 '19 at 18:05

nyagolova

1,731
2
26
42

11

`justify` is for horizontal alignment and `align` is for vertical alignment. So you should have `align="center"` and not `justify="center"` – David North Sep 27 '19 at 10:09

score 7 · Answer 5 · edited Jul 18 '20 at 21:08

7

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>

edited Jul 18 '20 at 21:08

Marcello B.

4,177
11
45
65

answered May 08 '20 at 15:24

Daniel Danielecki

8,508
6
68
94

score 5 · Answer 6 · answered May 17 '22 at 17:40

5

For the new Vuetify v3.0.0.0-beta this worked for me:

<v-container class="fill-height">
    <v-row align="center" justify="center" class="fill-height">
        <p>Center</p>
    </v-row>
</v-container>

answered May 17 '22 at 17:40

Samball

623
7
22

Just a little side note. Instead of align="center" you can also use align-content="center" in the v-row tag. – Chris Jul 07 '22 at 07:54

score 3 · Answer 7 · edited Jul 18 '20 at 21:08

3

<v-container> has to be right after <template>, if there is a <div> in between, the vertical align will just not work.

<template>
  <v-container fill-height>
      <v-row class="justify-center align-center">
        <v-col cols="12" sm="4">
            Centered both vertically and horizontally
        </v-col>
      </v-row>
  </v-container>
</template>

edited Jul 18 '20 at 21:08

Marcello B.

4,177
11
45
65

answered May 30 '20 at 14:32

Daniel

1,189
2
12
30

score 3 · Answer 8 · answered Apr 10 '21 at 19:17

Without using rows or columns... you can center your main content of your vuetify app like this:

<v-app>
    <v-main>
        <v-container fluid fill-height>
            <v-layout class="align-center justify-center">
                <router-view></router-view>
            </v-layout>
        </v-container>
    </v-main>
</v-app>

score 1 · Answer 9 · answered Jun 18 '21 at 15:16

In my exemple the first v-for will take up all of the parent element's spacing, the fill-heigh will take up all the available height. This way we can use a second v-row to position as best as possible.

<v-row class="fill-height">
  <v-row align="center" justify="center">
    try TOO
    align="start" || align="center" ||  align="end" <br>
    justify="start" || justify="center" || justify="end"
  </v-row>
</v-row>

Plase check the grids docs here: https://vuetifyjs.com/en/components/grids/#justify

score 1 · Answer 10 · answered Oct 05 '22 at 13:01

In Vuetify v2 you can achieve that with minimal markup using just the d-flex, justify-center and align-center classes on the container:

<div  
  style="width: 100px; height: 100px; border: 1px solid black;"
  class="d-flex justify-center align-center"
>
  Hello
</div>

score 0 · Answer 11 · answered Nov 23 '20 at 16:37

0

For me, align="center" was enough to center FOO vertically:

<v-row align="center">
  <v-col>FOO</v-col>
</row>

answered Nov 23 '20 at 16:37

DevonDahon

7,460
6
69
114

Center content vertically on Vuetify

11 Answers11

Update for new vuetify version

Original answer