表单未居中对齐（垂直居中/居中）

Question

我有一个下面的代码，我在 v-flex 上定义了 align-center justify-center。但我仍然看到登录表单没有在屏幕上垂直居中。我的代码有什么问题？

<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>

这是屏幕输出。注意它在顶部居中，而不是垂直中间。

更新了更多细节：

这是我的 App.vue 内容。

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

Navigation.vue (app-navbar) 文件如下

<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>

请帮帮我。

Answer 1

将fill-height 添加到v-container 和align-center 到v-layout 怎么样：

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

删除<main>标签

另外，v-content no longer needs to be wrapped in a main tag。

因此，将您的 App.vue 更改为：

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

到

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

    <router-view/>

  </v-app>
</template>

JSFiddle demo here.

Answer 2

很遗憾，如果没有演示链接，我将无法为您提供帮助。但是，如果我猜测您的问题可能是由于您的列大小 attrs - xs8。或者你可能使用了不正确的 flex 属性。尝试使用 align-items: center;