Center content vertically on Vuetify

vuetify justify-center
vuetify grid-list
vuetify border
vuetify v-col align right
vuetify fill-height
vuetify padding
vuetify snackbar center text
vuetify button

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.

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/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 vertical centering within v-flex element, Versions. Latest Vue 2.4.2. Latest Vuetify 0.14.11 The suggested solution does not center the content vertically (only horizontally). Thanks, vuetify center items into v-flex. I'm trying to center a <v-btn> into a <v-flex>. Since my direction is horizontal, my button should be center aligned but it's not. Here is the codepen that reproduce my problem. I want to signup the button to be centered inside the div (v-flex).

[Help] How to center items in v-container's horizon and vertical view , Steps to reproduce Create a template with -> -> Versions Vue 2.4.2, Vuetify 0.14.​11, Edge 15. What is expected ? Because of the fill-height. Environment Vuetify Version: 2.2.11 Vue Version: 2.6.11 Browsers: Chrome 81.0.4044.138 OS: Windows 10 Steps to reproduce Create vertical v-tabs as shown here Create a basic grid including <v-img> inside v-tab-item's v-card Resize window

Here's another approach using Vuetify grid system available in Vuetify 2.x: https://vuetifyjs.com/en/components/grids

<v-container>
    <v-row justify="center">
        Hello I am center to vertically using "grid".
    </v-row>
</v-container>

Centering horizontally and vertically does not work within v-app , The grid is used to create specific layouts within an application's content. v-​container provides the ability to center and horizontally pad your site's contents. align-items and justify-content are the important properties to absolutely center text horizontally and vertically. Horizontally centering is managed by the justify-content property and vertical centering by align-items. Not only can align-items be used to center text it vertically centers any child element.

Grid system, Text helpers assist in modifying your application layout on varying viewport sizes with pre-configured css classes. Can I Vertically Center an Element Using vertical-align? A common misconception is that the vertical-align: middle CSS property can be used to vertically center an element within its parent. While vertical-align: middle can be used to vertically align the content of a table cell, it won’t work on other elements.

CSS Text helpers, Using display utilities you can turn any element into a flexbox container .align-​start .align-end .align-center .align-baseline .align-stretch .align-sm-start  The v-btn component replaces the standard html button with a material design theme and a multitude of options. Any color helper class can be used to alter the background or text color. Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.

CSS Flex helpers, Tutorials of (Example: Vertical Center alignment (Vuetify)) by Ivan Lim red</​code> <code>v-layout: align-center teal</code> </v-flex> <v-flex xs6 text-xs-​center  Hence, you will always need to apply display: flex or display: inline-flex to a parent element in order to apply flex properties to the child. In order to vertically and/or horizontally center text or other content contained in a flex item, make the item a (nested) flex container, and repeat the centering rules.

Comments
  • I just want to add a note: align-center center works only if fill-height is set for the container. Thank you
  • 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>).
  • 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
  • justify is for horizontal alignment and align is for vertical alignment. So you should have align="center" and not justify="center"