如何在Vuetify的布局中居中元素？

Question

在 vuetify 中，我想水平/垂直居中旋转轮。到目前为止我有这个 https://codepen.io/anon/pen/rXGyVE?&editable=true&editors=101 但它不垂直居中。我该如何解决？

<div id="app">
  <v-app id="inspire">
      <v-card height="200">
        <v-layout column align-center justify-center>
            <v-flex>
                <v-progress-circular indeterminate :size="50" color="primary" class=""></v-progress-circular>
            <v-flex>
        </v-layout>
     </v-card>
  </v-app>
</div>

js

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

})

Answer 1

这似乎是工作：

Vue.config.devtools = false
Vue.config.productionTip = false
new Vue({
  el: '#app',
  vuetify: new Vuetify()
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
  <v-app id="inspire">
      <v-card height="200">
        <v-layout align-center justify-center column fill-height>
            <v-flex row align-center>
                <v-progress-circular indeterminate :size="50" color="primary" class=""></v-progress-circular>
            </v-flex>
        </v-layout>
     </v-card>
  </v-app>
</div>