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

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:

    
        
            Centered both vertically and horizontally
        
    

• 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.