I have a component positioned at the top of the page, but I would like it to be centered instead. https://i.sstatic.net/wSFBP.png
Something like this: https://i.sstatic.net/rfqAB.png
Here is my current code:
<template>
<v-container class="align-center" fill-height fluid>
<v-row class="d-flex justify-center mb-6">
<h1>Counter <v-icon>mdi-clock-outline</v-icon></h1>
</v-row>
<v-row class="d-flex justify-center mb-6">
<h2>{{ count }}</h2>
</v-row>
<v-row class="d-flex justify-center mb-6">
<v-btn @click="increment" class="mx-5" icon><v-icon>mdi-plus</v-icon></v-btn>
<v-btn @click="decrement" class="mx-5" icon><v-icon>mdi-minus</v-icon></v-btn>
</v-row>
</v-container>
</template>
Could someone please advise me on how to center everything using Vuetify3? Thank you in advance.