垂直居中

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