Центральное содержимое по вертикали на Vuetify

Есть ли способ центрировать контент по вертикали в Vuetify?

С помощью вспомогательного класса text-xs-center содержимое центрируется только по горизонтали:

<v-container grid-list-md text-xs-center>
  <v-layout row wrap>
     <v-flex xs12>
       Hello
     </v-flex>
  </v-layout>

Из API я протестировал некоторые другие вспомогательные классы, такие как align-content-center но не достиг результата.

Ответы

Ответ 1

Вы можете использовать align-center для layout и fill-height для контейнера.

DEMO

new Vue({
  el: '#app' 
})

.bg{
    background: gray;
    color: #fff;
    font-size: 18px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>

Ответ 2

Вот еще один подход с использованием системы Vuetify grid, доступной в 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>

Ответ 3

Эти реквизиты достаточно:

<v-container 
  grid-list-md 
  fill-height
>
  <v-layout 
     row 
     wrap
     align-center
   >
     <v-flex xs12>
         Centered vertically and horizontally
      </v-flex>
   </v-layout>
</v-container>

Я удалил text-xs-center prop, потому что align-center делает свою работу.