[Vuejs]-How can I align the container in the center

if you give a class ‘row’ to the first v-main that is wrapping all the elements and a class ‘mx-auto’ to the div that is wrapping the calculator it may work.

    <v-main row>
      <div class="col-8 mx-auto">
        <h1 pb-1>Calculate stuff</h1>
        <p disclaimer pb-10>Hi Lorem ipsum</p>
        <v-layout class="layout row">
          <v-flex xs8>
            <v-form>
              <v-layout row wrap>
                <v-flex pr-3 xs12 sm6>
                  <div class="field" mb-3>
                    <label>Tokens staked</label>
                    <v-input type="number" />
                  </div>
                  <div class="field" mb-3>
                    <label>Tokens staked</label>
                    <input type="number" />
                  </div>
                  <div class="field" mb-3>
                    <label>Tokens staked</label>
                    <input type="number" />
                  </div>
                </v-flex>
                <v-flex pr-3 xs12 sm6>
                  <div class="field" mb-3>
                    <label>Tokens staked</label>
                    <input type="number" />
                  </div>
                  <div class="field" mb-3>
                    <label>Tokens staked</label>
                    <input type="number" />
                  </div>
                  <div class="field" mb-3>
                    <v-btn elevation="2" color="purple"></v-btn>
                  </div>
                </v-flex>
              </v-layout>
            </v-form>
          </v-flex>
          <v-flex xs4>
            <div class="pl-3">
              <h3 subheading mb-3>Random text</h3>
              <ul class="rewards mb-5">
                <li>Field1</li>
                <li>Field2</li>
                <li>Field3</li>
              </ul>
            </div>
          </v-flex>
        </v-layout>
      </div>
    </v-main>

You want the outer div using justify-center and be full height of the page height="100vh".
And the inner div has to have a set height (=height of your calculator element to be centered) and an align-self-center to make it center itself nicely within the flexbox.

I recommend reading more about in-depth flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
And using vuetify flex helpers here: https://v2.vuetifyjs.com/en/styles/flex/

Also a more general guide about how to center things with css (you’d have to look for the appropriate vuetify classes then) https://css-tricks.com/centering-css-complete-guide/