The form is not center aligned (vertically centered/middle)

Question

I have a below code, there I have align-center justify-center defined on the v-flex. But I still see the signin form is not vertically centered in the screen. Whats wrong in my code?

<template>
  <v-container>
    <v-layout row wrap>
      <v-flex xs12 sm8 offset-sm2 align-center justify-center>
        <v-card class="elevation-12">
          <v-toolbar dark color="primary">
            <v-toolbar-title>Sign In</v-toolbar-title>
          </v-toolbar>
          <v-card-text>
            <v-container>
              <form>
                <v-layout row>
                  <v-flex xs12>
                    <v-text-field
                      name="emailid"
                    </v-text-field>
                  </v-flex>
                </v-layout>
                <v-layout row>
                  <v-flex xs12>
                    <v-text-field
                      name="password"
                    </v-text-field>
                  </v-flex>
                </v-layout>
                <v-layout row xs12>
                  <v-flex>
                    <v-btn flat block color="primary"
                      @click.prevent="validateBeforeSubmit">
                    Sign In
                    </v-btn>
                  </v-flex>
                  <v-flex>
                    <v-btn flat block
                      @click.prevent="clear">
                    Clear
                    </v-btn>
                  </v-flex>
                </v-layout>
              </form>
            </v-container>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

Here's the screen output. Notice it is centered at the top, not vertical middle.

Updated with additional details:

Here is my App.vue content.

<template>
  <v-app>
    <app-navbar></app-navbar>
    <main>
      <router-view/>
    </main>
  </v-app>
</template>

The Navigation.vue (app-navbar)file has below

<template>
  <div v-if="!userLoggedIn">
    <v-navigation-drawer absolute temporary v-model='sideNav'>
      <v-toolbar flat>
      <v-list>
        <v-list-tile>
          <v-list-tile-title class='title'>
            Talent Search
          </v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-toolbar>
    <v-divider></v-divider>
    <v-list class='pt-0'>
      <v-list-tile v-for='item in menuItems' :key='item.title' :to='item.link'>
        <v-list-tile-action>
          <v-icon>{{ item.icon }}</v-icon>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list>
    </v-navigation-drawer>
    <v-toolbar dense dark color="menus">
      <v-toolbar-side-icon @click.stop='sideNav = !sideNav' class='hidden-sm-and-up '>
      </v-toolbar-side-icon>
      <v-toolbar-title>
        <router-link to='/' tag='span' style='cursor: pointer'>Talent Search</router-link>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class='hidden-xs-only'>
        <v-btn flat v-for='item in menuItems' :key='item.title' :to='item.link'>
          <v-icon left dark>{{ item.icon }}</v-icon>
          {{ item.title }}
        </v-btn>
      </v-toolbar-items>
    </v-toolbar>
  </div>
  <div v-else-if="userLoggedIn">
    <v-toolbar dense>
      <v-toolbar-side-icon @click.stop='userLoggedSideNav = !userLoggedSideNav'>
      </v-toolbar-side-icon>
      <v-toolbar-title>Title</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items>
        <v-btn
          flat
          @click="onLogout">
          <v-icon left dark>exit_to_app</v-icon>
          Sign Out
        </v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <v-navigation-drawer mb-0 absolute temporary v-model='userLoggedSideNav'>
      <v-layout row align-center>
        <v-flex justify-center>
          <some_image>
        </v-flex>
      </v-layout>
      <v-list class="pt-2 mb-0 pb-0" dense>
        <v-divider></v-divider>
        <v-subheader>Profile</v-subheader>
        <v-list-tile v-for="item in items" :key="item.title" :to='item.link' ripple>
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>

Please help me on this.

Answer 1

How about adding fill-height to the v-container and align-center to the v-layout:

<v-container fill-height>
  <v-layout row wrap align-center>

Remove the <main> tag

Also, v-content no longer needs to be wrapped in a main tag.

So change your App.vue from:

<template>
  <v-app>
    <app-navbar></app-navbar>
    <main>
      <router-view/>
    </main>
  </v-app>
</template>

To

<template>
  <v-app>
    <app-navbar></app-navbar>

    <router-view/>

  </v-app>
</template>

JSFiddle demo here.

Answer 2

Unfortunately, I won’t be able to help you without a demo link. However, if I were to guess your issue may due to your colum size attrs - xs8. Or perhaps you’re using the incorrect flex property. Try using the align-items: center;