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.
In v.2.xx , 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.
You could use align-center
for layout
and fill-height
for container.
Demo with v1.xx
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>
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>
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>
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>
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>
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>
<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>
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>
For me, align="center"
was enough to center FOO
vertically:
<v-row align="center">
<v-col>FOO</v-col>
</row>
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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.