¿Hay alguna forma de centrar el contenido verticalmente en Vuetify?
Con la clase auxiliar text-xs-center , el contenido se centra solo horizontalmente:
<v-container grid-list-md text-xs-center> <v-layout row wrap> <v-flex xs12> Hello </v-flex> </v-layout> Desde la API , probé algunas otras clases auxiliares, como align-content-center pero no obtuve el resultado.
En v.2.xx , podemos usar align y justify . Tenemos las siguientes opciones para configurar la alineación horizontal y vertical.
Alineación de align : 'start','center','end','baseline','stretch'
justify de PRPS: '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>Para obtener más detalles, consulte este sistema de cuadrícula vuetify y puede consultar aquí con la demostración de codepen en funcionamiento.
Puede usar align-center para el layout y fill-height para el contenedor.
Demostración con v1.xx
new Vue({ el: '#app' }) .bg{ background: gray; color: #fff; font-size: 18px; } <link href="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/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/vuetify@1.2.2/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>Aquí hay otro enfoque que usa el sistema de grid Vuetify disponible en 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>En Vuetify 2.x, v-layout y v-flex se reemplazan por v-row y v-col respectivamente. Para centrar el contenido tanto vertical como horizontalmente, debemos indicarle al componente v-row que lo haga:
<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>Todavía me sorprende que nadie haya propuesto la solución más corta con align-center justify-center para centrar el contenido vertical y horizontalmente. Verifique este CodeSandbox y el código a continuación:
<v-container fluid fill-height> <v-layout align-center justify-center> <v-flex> <!-- Some HTML elements... --> </v-flex> </v-layout> </v-container><v-container> tiene que estar justo después de <template> , si hay un <div> en el medio, la alineación vertical simplemente no funcionará.
<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>Para mí, align="center" fue suficiente para centrar FOO verticalmente:
<v-row align="center"> <v-col>FOO</v-col> </row>Sin usar filas o columnas... puedes centrar tu contenido principal de tu aplicación vuetify así:
<v-app> <v-main> <v-container fluid fill-height> <v-layout class="align-center justify-center"> <router-view></router-view> </v-layout> </v-container> </v-main> </v-app>En mi ejemplo, el primer v-for ocupará todo el espacio del elemento principal, la altura de relleno ocupará toda la altura disponible. De esta manera podemos usar una segunda fila en V para posicionarnos lo mejor posible.
<v-row class="fill-height"> <v-row align="center" justify="center"> try TOO align="start" || align="center" || align="end" <br> justify="start" || justify="center" || justify="end" </v-row> </v-row>Consulte los documentos de cuadrículas aquí: https://vuetifyjs.com/en/components/grids/#justify