Javascript 在 Vuetify 上垂直居中内容

Center content vertically on Vuetify

提问by Billal Begueradj

Is there a way to center content vertically in Vuetify?

有没有办法在 Vuetify 中垂直居中内容？

With the text-xs-centerhelper class, the content gets centered horizontally only:

使用text-xs-center辅助类，内容仅水平居中：

<v-container grid-list-md text-xs-center>
  <v-layout row wrap>
     <v-flex xs12>
       Hello
     </v-flex>
  </v-layout>

From the API, I tested some other helper classes such as align-content-centerbut did not achieve the result.

从API 中，我测试了其他一些辅助类，例如align-content-center但没有达到结果。

回答by Narendra Jadhav

Update for new vuetify version

更新新的 vuetify 版本

In v.2.x.x, we can use alignand justify. We have below options for setup the horizontal and vertical alignment.

在v.2.xx 中，我们可以使用align和justify。我们有以下设置水平和垂直对齐的选项。

1. PROPS align: 'start','center','end','baseline','stretch'

2. PRPS justify: 'start','center','end','space-around','space-between'

1. 道具align：'start','center','end','baseline','stretch'

2. 公关计划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>

For more details please refer this vuetify grid-systemand you could check here with working codependemo.

有关更多详细信息，请参阅此vuetify 网格系统，您可以在此处查看有效的codepen演示。

---

---

Original answer

原答案

You could use align-centerfor layoutand fill-heightfor container.

您可以使用align-centerforlayout和fill-heightfor 容器。

Demo with v1.x.x

使用 v1.xx 进行演示

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

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>

回答by Billal Begueradj

In Vuetify 2.x, v-layoutand v-flexare replaced by v-rowand v-colrespectively. To center the content both vertically and horizontally, we have to instruct the v-rowcomponent to do it:

在 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"will center the content vertically inside the row
• justify="center"will center the content horizontally inside the row
• fill-heightwill center the whole content compared to the page.

• align="center"将使行内的内容垂直居中
• justify="center"将在行内水平居中内容
• 与页面相比，填充高度将使整个内容居中。

回答by Nyagolova

Here's another approach using Vuetify gridsystem available in Vuetify 2.x: https://vuetifyjs.com/en/components/grids

这是使用 Vuetifygrid系统的另一种方法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>

回答by Daniel Danielecki

Still surprised that no one proposed the shortest solution with align-center justify-centerto center content vertically and horizontally. Check this CodeSandboxand code below:

仍然感到惊讶的是，没有人提出将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>

回答by eyyo

has to be right after , if you there is a in between, the vertical align will just not work.

必须在之后，如果中间有一个，则垂直对齐将不起作用。

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