垂直居中

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

官方文档导航:


原生 CSS 文档导航:

使用 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>
Last updated on by AGDholo