質問

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 のような他のヘルパークラスもテストしましたが、結果は得られませんでした。

どのように解決するのですか？

vuetifyの新しいバージョンへのアップデート

で v.2.x.x であれば align と justify . 水平方向と垂直方向のアライメントを設定するために、以下のオプションがあります。

1. プロップス 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>

詳細はこちらをご覧ください。 vuetify grid-system を参照してください。 コードペン のデモをご覧ください。

オリジナルの回答

あなたは align-center に対して layout と fill-height はコンテナ用です。

v1.x.xを使ったデモ

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>