Vuetity水平垂直居中

最新推荐文章于 2025-09-12 18:18:05 发布

原创最新推荐文章于 2025-09-12 18:18:05 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #css3 #css #vuetifyjs

学习笔记专栏收录该内容

70 篇文章

订阅专栏

本文展示了如何利用Vuetify框架的v-container、v-layout、v-flex和fill-height属性来实现页面内容的水平垂直居中对齐。示例代码包括了在一个v-row中设置两个v-col，每个col内包含一个v-card，并确保内容在卡片内填充并居中显示。

Vuetify

水平垂直居中，通过v-layout、v-flex以及v-container的fill-height属性。
在这里插入图片描述
代码参考

<template>
  <v-container class="fill-height">
    <v-layout align-center align-content-center>
      <v-flex>
        <v-container>
          <v-row class="text-center fill-height">
            <v-col cols="4" align-self="stretch">
              <v-card class="fill-height" tile>
                <v-card-text>
                  <pie-chart
                    title="Attendances"
                    subtitle="of 2022/01/01"
                    :data="attendances"
                  />
                </v-card-text>
              </v-card>
            </v-col>
            <v-col cols="8" align-self="stretch">
              <v-card class="fill-height" tile>
                <v-card-text>
                  <bar-stack-chart
                    :categories="categories"
                    :data="attendancesGroupByDepartment"
                  />
                </v-card-text>
              </v-card>
            </v-col>
          </v-row>
        </v-container>
      </v-flex>
    </v-layout>
  </v-container>
</template>