は、ページの一番上にコンテナを揃えることができませんし、それが水平に

Question

中央これは私のコードです：

<template> 
    <main> 
    <v-container grid-list-xs class="text-xs-center"> 
     <v-layout row> 
     <v-flex xs2 v-for="n in 6" :key="n"> 
      <v-card tile class="pa-1" dark color="error"> 
      <v-card-text> 
       Some mildly interesting thing #{{ n }} 
      </v-card-text> 
      </v-card> 
     </v-flex> 
     </v-layout> 
     <v-layout row> 
     <v-flex xs12 > 
      <v-card tile class="pa-2" dark color="secondary"> 
      <v-card-text> 
       Well, that's interesting too! 
      </v-card-text> 
      </v-card> 
     </v-flex> 
     </v-layout> 
     <v-layout row> 
      <v-flex xs2 v-for="n in 6" :key="n"> 
      <v-card tile class="pa-1" color="warning"> 
       <v-card-text> 
       And something more here #{{ n }}. 
       </v-card-text> 
       </v-card> 
      </v-flex> 
      </v-layout> 
     </v-layout> 
     </v-container> 
    </main> 
</template> 

<main>が使用されているとき、私は垂直トップに並ぶ全てのフレックスのアイテム、との見解を取得しています私の目標ですが、それらは中央に水平に整列していません。右側には隙間があります（最初の画像に疑問符が表示されます）。

コードから<main>を削除し、<v-container>が親要素になると、アイテムは水平方向と垂直方向の中央に移動します（2番目の画像）。

もう一度、それらを上にv揃えにして、中央に水平に配置する必要があります。これを達成する方法は？

Answer 1

メインタグをvコンテンツタグで置き換えます。私はこの同じ問題を抱えていた。メインタグではなく、v-contentタグでRouter wrap router-viewを使用している場合。 Vuetifysの文書で例を見つけることができますVuetify

Answer 2

私はあなただけのようにもV-コンテナおよびおそらく流体上フィル高さが必要だと思います。

<v-container fill-height grid-list-xs class="text-xs-center">