vue.js - How can I align the container in the center

Question

My main goal is to create a calculator for a community. I want to place the container in the center of the screen, slightly below the navbar, but it just does not work. I played around with the fill-heigh fluid prop in container and align center for the row.

    <v-main>
  <div class="center-container">
    <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>

question from:https://stackoverflow.com/questions/65909937/how-can-i-align-the-container-in-the-center

Answer 1

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>