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.
This question is related to
javascript
css
vue.js
vuetify.js
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.
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>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>
<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>
For me, align="center" was enough to center FOO vertically:
<v-row align="center">
<v-col>FOO</v-col>
</row>
Source: Stackoverflow.com