在Vuetify上垂直居中

Question

有没有办法在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但没有实现结果.

Answer 1

您可以使用align-centerfor layout和fill-heightfor container.

DEMO

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

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

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/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/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>

Answer 2

在 Vuetify 2.x 中，v-layout和v-flex分别被v-row和v-col取代。要使内容垂直和水平居中，我们必须指示v-row组件执行此操作：

<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="center"将使行内的内容垂直居中
• justify="center"将使内容在行内水平居中
• 与页面相比，填充高度将使整个内容居中。

Answer 3

对于卡片：简洁且适用于 v2+。这将为您提供一张内容水平和垂直居中的 v 卡：

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

代码笔

Answer 4

仍然感到惊讶的是，没有人提出将align-center justify-center内容垂直和水平居中的最短解决方案。检查此 CodeSandbox和下面的代码：

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

Answer 5

这是使用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>

Answer 6

对于新的 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>