在 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

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

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

codepen

Answer 2

在我的示例中，第一个 v-for 将占用所有父元素的间距，而 fill-heigh 将占用所有可用高度。这样我们就可以使用第二个 v-row 来尽可能地定位。

<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

Answer 3

不使用行或列...您可以像这样将 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>

Answer 4

对我来说，align="center" 足以垂直居中 FOO：

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

Answer 5

<v-container> 必须紧跟在<template> 之后，如果中间有<div>，垂直对齐将不起作用。

<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>

Answer 6

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

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

Answer 7

这是使用 Vuetify grid 系统的另一种方法，在 Vuetify 2.x 中可用：https://vuetifyjs.com/en/components/grids

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

Answer 8

在 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" 将内容水平居中行内
• fill-height 将使整个内容居中与页面相比。

Answer 9

更新 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，您可以在此处查看工作中的codepen 演示。

---

原答案

您可以将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/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>