[Help] How to center items in v-container's horizon and vertical view

Steps to reproduce

1. I use below code to layout my whole page content:

<div id="app">
  <v-app id="inspire">
    <!-- -->
    <v-toolbar fixed :dense="true" class="primary" :dark="true" scroll-off-screen scroll-target="#scrolling-main">
      <!-- <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon> -->
      <v-toolbar-title>xxxx</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-text-field prepend-icon="search" hide-details single-line></v-text-field>
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn to="/">Home</v-btn>
      </v-toolbar-items>
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn to="/about">About</v-btn>
      </v-toolbar-items>

    </v-toolbar>
    <main id="scrolling-main">
      <v-container class="text-xs-center" style="min-height: 100vh">
        <!--vue-router-->
        <v-layout row child-flex justify-center align-center wrap>
          <v-flex fill-height>
            <v-btn>test
              </>
          </v-flex>
        </v-layout>
      </v-container>
    </main>
  </v-app>
</div>

1. You can see v-btn is located in the first row ,not in the center of v-layout. what my purpose is to center all the items in v-layout in vertical view . had tried fill-height but no affect .
2. Please help see the provided link let me know if i need to add some other custom styles

Versions

Latest Vue 2.4.2 Latest Vuetify 0.14.11

What is expected ?

1. Use the fill-height it should center to the v-container

What is actually happening ?

1. Try any properties i had found, but still it not located in the center view.

Reproduction Link

https://codepen.io/alterhu2020/pen/GvQqrZ

[nekosaur]

This is one way you can do it. https://codepen.io/nekosaur/pen/MvQjgL

[desprit]

Am I wrong or solution proposed by @nekosaur really isn’t centering element up vertically? Only horizontally.