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

[alterhu2020]

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

[alterhu2020]

very thanks for your help, It really great property . Why the official document located in API section had not mentioned this property? see here: https://vuetifyjs.com/layout/grid @nekosaur

[nekosaur]

I'll update the docs

[alterhu2020]

thanks @nekosaur

[don41382]

@nekosaur instead of a button, I would like to align a <v-text-field/>, but that doesn't seem to work. do you have any idea?

see https://codepen.io/anon/pen/wrEvJG

I solved it, the textfield just needed display: inline-block style.

see https://codepen.io/anon/pen/wrEvJG

[desprit]

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

[KaelWD]

It's almost like this issue is from over six months ago.

[begueradj]

The suggested solution does not center the content vertically (only horizontally).
Thanks,
Billal Begueradj

[nekosaur]

Please do not comment on a closed issue. Join our chat or create a new issue if you need help.

https://codepen.io/anon/pen/qMJqdb