😶

Vue.js|Vuetifyでコンテンツを垂直方向に中央揃えする

2021/12/28に公開

公式ドキュメントは下記のfill-height部分が該当する。
https://vuetifyjs.com/ja/components/grids/#section-30b530f330d730eb

全体のコードはこちら。

Login.js
<template>
  <v-app>
    <v-main>
      <v-container fill-height>
        <v-card width="400px" class="mx-auto mt-5">
          <v-card-actions>
            <v-col>
              <v-btn
              block
              class="text-transform py-4 my-2"
              color="primary"
              >
                ボタン
              </v-btn>
              <v-btn
              block
              text
              class="text-transform py-4 my-2"
              color="primary"
              >
                ボタン
              </v-btn>
            </v-col>
          </v-card-actions>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</template>

これで垂直方向に中央揃えできる。

Login.js
<v-container fill-height>

Discussion