Gibt es eine Möglichkeit, Inhalte in Vuetify vertikal zu zentrieren?

Mit dem text-xs-center Helferklasse wird der Inhalt nur horizontal zentriert:

<v-container grid-list-md text-xs-center>
  <v-layout row wrap>
     <v-flex xs12>
       Hello
     </v-flex>
  </v-layout>

Von dem APIich habe einige andere Hilfsklassen getestet, wie z align-content-center aber das Ergebnis nicht erreicht.

Update für neue vuetify-Version

Im v.2.xx wir können benutzen align und justify. Wir haben die folgenden Optionen zum Einrichten der horizontalen und vertikalen Ausrichtung.

1. REQUISITEN align : 'start','center','end','baseline','stretch'

2. PRPS justify : 'start','center','end','space-around','space-between'

<v-container fill-height fluid>
  <v-row align="center"
      justify="center">
      <v-col></v-col>
  </v-row>
</v-container>

Weitere Informationen finden Sie hier vuetify Grid-System und Sie könnten hier mit der Arbeit überprüfen Codestift Demo.

Ursprüngliche Antwort

Du könntest benutzen align-center zum layout und fill-height für Behälter.

Demo mit v1.xx

new Vue({
  el: '#app' 
})

.bg{
    background: gray;
    color: #fff;
    font-size: 18px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
      <v-container bg fill-height grid-list-md text-xs-center>
        <v-layout row wrap align-center>
          <v-flex>
            Hello I am center to vertically using "align-center".
          </v-flex>
        </v-layout>
      </v-container>
  </v-app>
</div>

In Vuetify 2.x, v-Layout und v-flex werden ersetzt durch v-Reihe und v-Spalte beziehungsweise. Um den Inhalt sowohl vertikal als auch horizontal zu zentrieren, müssen wir die anweisen v-Reihe Komponente dazu:

<v-container fill-height>
    <v-row justify="center" align="center">
        <v-col cols="12" sm="4">
            Centered both vertically and horizontally
        </v-col>
    </v-row>
</v-container>

• ausrichten = “zentrieren” zentriert den Inhalt vertikal innerhalb der Reihe
• justify=”center” zentriert den Inhalt horizontal innerhalb der Reihe
• Füllhöhe zentriert den gesamten Inhalt im Vergleich zur Seite.

Hier ist ein weiterer Ansatz mit Vuetify grid System verfügbar in Vuetify 2.x: https://vuetifyjs.com/en/components/grids

<v-container>
    <v-row align="center">
        Hello I am center to vertically using "grid".
    </v-row>
</v-container>

Immer noch überrascht, dass niemand die kürzeste Lösung mit vorgeschlagen hat align-center justify-center um Inhalte vertikal und horizontal zu zentrieren. Prüfen diese CodeSandbox und Code unten:

<v-container fluid fill-height>
  <v-layout align-center justify-center>
    <v-flex>
      <!-- Some HTML elements... -->
    </v-flex>
  </v-layout>
</v-container>

FÜR KARTEN: Prägnant und funktioniert in v2+. Dadurch erhalten Sie eine V-Karte mit zentriertem Inhalt HORIZONTAL und VERTIKAL:

<v-card class="d-flex align-center justify-center"  min-height="250">
    Content here...
</v-card>

Codestift

Für die neue Vuetify v3.0.0.0-beta hat das bei mir funktioniert:

<v-container class="fill-height">
    <v-row align="center" justify="center" class="fill-height">
        <p>Center</p>
    </v-row>
</v-container>

<v-container> muß sein gleich nach <template>Wenn da ein … ist <div> Dazwischen funktioniert die vertikale Ausrichtung einfach nicht.

<template>
  <v-container fill-height>
      <v-row class="justify-center align-center">
        <v-col cols="12" sm="4">
            Centered both vertically and horizontally
        </v-col>
      </v-row>
  </v-container>
</template>