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    lt v-container grid-list-md text-xs-center gt     lt v-layout row wrap gt        lt v-flex xs12 gt         Hello       lt  v-flex gt     lt  v-layout gt      From the API  I tested some other helper classes such as align-content-center but did not achieve the result

User · Answer

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   lt v-container fill-height gt       lt v-row justify  quot center quot  align  quot center quot  gt           lt v-col cols  quot 12 quot  sm  quot 4 quot  gt              Centered both vertically and horizontally          lt  v-col gt       lt  v-row gt   lt  v-container gt    align  quot center quot  will center the content vertically inside the row justify  quot center quot  will center the content horizontally inside the row fill-height will center the whole content compared to the page

User · Answer

lt v-container gt  has to be right after  lt template gt   if there is a  lt div gt  in between  the vertical align will just not work   lt template gt     lt v-container fill-height gt         lt v-row class  quot justify-center align-center quot  gt           lt v-col cols  quot 12 quot  sm  quot 4 quot  gt              Centered both vertically and horizontally          lt  v-col gt         lt  v-row gt     lt  v-container gt   lt  template gt

User · Answer

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   lt v-container fluid fill-height gt     lt v-layout align-center justify-center gt       lt v-flex gt         lt  -- Some HTML elements    -- gt       lt  v-flex gt     lt  v-layout gt   lt  v-container gt

User · Answer

For me  align  quot center quot  was enough to center FOO vertically   lt v-row align  quot center quot  gt     lt v-col gt FOO lt  v-col gt   lt  row gt

User · Answer

Here s another approach using Vuetify grid system available in Vuetify 2 x  https   vuetifyjs com en components grids  lt v-container gt       lt v-row align  quot center quot  gt          Hello I am center to vertically using  quot grid quot        lt  v-row gt   lt  v-container gt

User · Answer

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   PROPS align    start   center   end   baseline   stretch   PRPS justify    start   center   end   space-around   space-between     lt v-container fill-height fluid gt     lt v-row align  quot center quot        justify  quot center quot  gt         lt v-col gt  lt  v-col gt     lt  v-row gt   lt  v-container gt    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  x000D   x000D  new Vue     el    app      x000D   bg      background  gray      color   fff      font-size  18px    x000D   lt link href  https   cdn jsdelivr net npm vuetify 1 2 2 dist vuetify min css  rel  stylesheet    gt   lt script src  https   cdn jsdelivr net npm vue dist vue min js  gt  lt  script gt   lt script src  https   cdn jsdelivr net npm vuetify 1 2 2 dist vuetify min js  gt  lt  script gt    lt div id  app  gt     lt v-app gt         lt v-container bg fill-height grid-list-md text-xs-center gt           lt v-layout row wrap align-center gt             lt v-flex gt              Hello I am center to vertically using  align-center              lt  v-flex gt           lt  v-layout gt         lt  v-container gt     lt  v-app gt   lt  div gt  x000D   x000D   x000D

[javascript] Center content vertically on Vuetify

Examples related to javascript

Examples related to css

Examples related to vue.js

Examples related to vuetify.js