Vuetity水平垂直居中

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>