在 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 但没有达到结果。

原文由 Billal Begueradj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新新的 vuetify 版本

在 v.2.xx 中，我们可以使用 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 网格系统，您可以在此处查看工作中的 codepen 演示。

---

原始答案

您可以将 align-center 用于 layout 和 fill-height 用于容器。

v1.xx 演示

 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>

原文由 Narendra Jadhav 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Billal Begueradj 发布，翻译遵循 CC BY-SA 4.0 许可协议