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:

&         


        

Answer 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'

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;
}

  
      
        
          
            Hello I am center to vertically using "align-center".