Luego de consultar con especialistas en la materia, programadores de deferentes ramas y maestros hemos dado con la respuesta al dilema y la dejamos plasmada en este post.
Solución:
Actualización para nueva versión de vuetify
En v.2.xx nosotros podemos usar align y justify. Tenemos las siguientes opciones para configurar la alineación horizontal y vertical.
-
ACCESORIOS
align:'start','center','end','baseline','stretch' -
PRPS
justify:'start','center','end','space-around','space-between'
Para obtener más detalles, consulte este sistema de cuadrícula vuetify y puede consultar aquí con la demostración de codepen en funcionamiento.
respuesta original
podrías usar align-center por layout y fill-height para contenedor.
Demostración con v1.xx
new Vue(
el: '#app'
).bg
background: gray;
color: #fff;
font-size: 18px;
[email protected]/dist/vuetify.min.css" rel="stylesheet" />
Hello I am center to vertically using "align-center".
En Vuetify 2.x, diseño en v y v-flexión son reemplazados por v-fila y v-col respectivamente. Para centrar el contenido tanto vertical como horizontalmente, tenemos que instruir al v-fila componente para hacerlo:
Centered both vertically and horizontally
- alinear = “centro” centrará el contenido verticalmente dentro de la fila
- justificar = “centro” centrará el contenido horizontalmente dentro de la fila
- altura de relleno centrará todo el contenido en comparación con la página.
Aquí hay otro enfoque usando Vuetify grid sistema disponible en Vuetify 2.x: https://vuetifyjs.com/en/components/grids
Hello I am center to vertically using "grid".
Si guardas algún dilema y disposición de reaccionar nuestro post te mencionamos ejecutar una acotación y con placer lo observaremos.