I've my component at the top of the page but I want in in the middle.

Like this:

This is my code:

<template>
  <v-container  fill-height fluid>
    <v-row >
      <h1>Contador <v-icon>mdi-clock-outline</v-icon></h1>
    </v-row>
    <v-row >
      <h2>{{ count }}</h2>
    </v-row>
    <v-row >
      <v-btn @click="increment"  icon><v-icon>mdi-plus</v-icon></v-btn>
      <v-btn @click="decrement"  icon><v-icon>mdi-minus</v-icon></v-btn>
    </v-row>
  </v-container>
</template>

How can I put everything in the middle? using vuetify3 if it's possible, and thanks in advance.

CodePudding user response：

Add d-flex class names to the container component and wrap v-row's with v-col component:

 <v-container  fill-height fluid>
      <v-col>
        <v-row >
          <h1>Contador <v-icon>mdi-clock-outline</v-icon>
          </h1>
        </v-row>
        <v-row >
          <h2>{{ count }}</h2>
        </v-row>
        <v-row >
          <v-btn  icon>
            <v-icon>mdi-plus</v-icon>
          </v-btn>
          <v-btn  icon>
            <v-icon>mdi-minus</v-icon>
          </v-btn>
        </v-row>
      </v-col>
    </v-container>

demo