0π
β
The following is enough to center the second div in the middle of the height.
<template>
<v-container fluid>
<v-row>
</v-row>
<v-row justify="center" no-gutters>
<v-col cols="5">
<v-card outlined height="80vh" max-height="80vh" class="pa-8 d-flex flex-column">
<v-row class="flex-grow-0">
<v-col>
<v-file-input accept="image/png, image/jpeg" chips label="Choose an image(JPG or PNG)" outlined
prepend-icon="image">
</v-file-input>
</v-col>
</v-row>
<v-row>
<v-col class="d-flex flex-column justify-center">
<p class="text-center text-h4 grey--text">
Image Preview
</p>
</v-col>
</v-row>
</v-card>
</v-col>
<v-col align-self="center" cols="2">
</v-col>
<v-col cols="5" align-self="center">
</v-col>
</v-row>
</v-container>
</template>
This is how it looks
The additional margin under the text comes from that one
Here is a really nice + short cheatsheet regarding flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
π€kissu
Source:stackexchange.com