在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，但是沒有得到結果。

在v.2.x.x中，我們可以使用align和justify。我們有以下選項來設置水平和垂直對齊。

道具對齊:“開始”、“中心”、“結束”、“基線”、“拉伸”

PRPS自圓其說:“開始”，“中心”，“結束”，“空格前后”，“空格之間”

<v-container fill-height fluid>
  <v-row align="center"
      justify="center">
      <v-col></v-col>
  </v-row>
</v-container>

更多細節(jié)請參考這個vuetify網格系統，你可以在這里查看工作代碼筆演示。

原答案 你可以對布局使用居中對齊，對容器使用填充高度。

使用v1.x.x進行演示

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

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

<link  rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/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>

在Vuetify 2.x中，v-layout和v-flex分別被v-row和v-col取代。要使內容垂直和水平居中，我們必須指示v行組件這樣做:

<v-container fill-height>
    <v-row justify="center" align="center">
        <v-col cols="12" sm="4">
            Centered both vertically and horizontally
        </v-col>
    </v-row>
</v-container>

align = & quot中心& quot將內容在行內垂直居中 justify = & quot中心& quot將內容在行內水平居中 填充高度將使整個內容相對于頁面居中。 對于卡:簡潔，并在v2+中工作。這將得到一個內容水平和垂直居中的虛擬卡片:

<v-card class="d-flex align-center justify-center"  min-height="250">
    Content here...
</v-card>

密碼筆

這是另一種使用Vuetify 2.x中可用的Vuetify網格系統的方法:https://vuetifyjs.com/en/components/grids

<v-container>
    <v-row align="center">
        Hello I am center to vertically using "grid".
    </v-row>
</v-container>

仍然感到驚訝的是，沒有人提出最短的解決方案，使內容垂直和水平居中。檢查此CodeSandbox和下面的代碼:

<v-container fluid fill-height>
  <v-layout align-center justify-center>
    <v-flex>
      <!-- Some HTML elements... -->
    </v-flex>
  </v-layout>
</v-container>

對于新的Vuetify v3.0.0.0-beta，這對我很有效:

<v-container class="fill-height">
    <v-row align="center" justify="center" class="fill-height">
        <p>Center</p>
    </v-row>
</v-container>

& ltv容器& gt必須緊接在& lt模板& gt，如果有& ltdiv & gt在兩者之間，垂直對齊不起作用。

<template>
  <v-container fill-height>
      <v-row class="justify-center align-center">
        <v-col cols="12" sm="4">
            Centered both vertically and horizontally
        </v-col>
      </v-row>
  </v-container>
</template>

不使用行或列...您可以將vuetify應用程序的主要內容置于中心位置，如下所示:

<v-app>
    <v-main>
        <v-container fluid fill-height>
            <v-layout class="align-center justify-center">
                <router-view></router-view>
            </v-layout>
        </v-container>
    </v-main>
</v-app>

在我的例子中，第一個v-for將占用父元素的所有空間，填充高度將占用所有可用的高度。這樣，我們可以使用第二個v行來盡可能好地定位。

<v-row class="fill-height">
  <v-row align="center" justify="center">
    try TOO
    align="start" || align="center" ||  align="end" <br>
    justify="start" || justify="center" || justify="end"
  </v-row>
</v-row>

請在此查看網格文檔: https://vuetifyjs.com/en/components/grids/#justify

在Vuetify v2中，只需在容器上使用d-flex、justify-center和align-center類，就可以用最少的標記實現這一點:

<div  
  style="width: 100px; height: 100px; border: 1px solid black;"
  class="d-flex justify-center align-center"
>
  Hello
</div>

對我來說，align = & quot中心& quot足以使FOO垂直居中:

<v-row align="center">
  <v-col>FOO</v-col>
</row>