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>