屏幕中央位置按钮

Question

我想将 Button（或任何其他组件）放置在屏幕中央，而不仅仅是行。

<div id="app">
  <v-app id="inspire"  fill-height fluid>
    <v-container fill-height fluid>
      <v-layout  fill-height fluid>
        <v-flex  fill-height fluid align-center>
          <v-btn>Click me</v-btn>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

我知道 Jumbotron，但实际上我想将 Form 放在中心，然后再添加 Toolbar 和 Footer

Example at codepen

Answer 1

<v-content>
    <!--- pick-up screen height so we can center vertically -->
    <v-container fill-height>
        <!--- vertical and horizontal alignment -->
        <v-layout align-center justify-center>
            <v-flex xs6>
            <!--- v-flex is centered now, but we need to center button inside v-flex -->
                <div class="text-xs-center">
                    <v-btn>Click me</v-btn>
                </div>
            </v-flex>
        </v-layout>
    </v-container>
</v-content>

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

屏幕中央位置按钮

Position button at the center of the screen

vuejs2

vuetify.js