垂直居中

在 Vuetify2.0 版本中，布局组件从 v-layout 更新为 v-row，但是核心都是基于 flex 或 grid 进行布局，所以我们只需要根据浏览器原生 API 以及官方文档，即可让内容垂直居中。

官方文档导航：

• 栅格（Grid）： https://vuetifyjs.com/components/grids/
• Flex： https://vuetifyjs.com/styles/flex/

原生 CSS 文档导航：

• 栅格（Grid） MDN： https://developer.mozilla.org/docs/Web/CSS/grid
• Flex MDN： https://developer.mozilla.org/docs/Web/CSS/flex

使用 Grid 垂直居中

vue

<!-- fill-height 属性，将区块内容设置为 100%，这样才能够让页面可以在垂直方向居中 -->

<!-- 你也可以将 fill-height 作为 class 使用，以便应用到任何类上面，class="fill-height" -->

<v-container fill-height>

<!-- align 属性，将内容块设置为垂直方向居中 -->

<!-- justify 属性，将内容块设置为横向方向居中 -->

<!-- 更多用例请查看官方文档 -->

<v-row align="center" justify="center">

<v-col></v-col>

</v-row>

</v-container>