I cant vertically align items in center #vuetify - vue.js

Question

i've been looking for 3 hours and cant find solution for my problem, dont know what am i doing wrong
All i want is to vertically align these 3 v-flex elements
<template>
<div class="home">
<v-container fluid class="pa-0">
<v-img :src="require('#/assets/images/background.jpg')" max-height="100%">
<v-layout align-center column>
<v-flex class="mb-2">
<span class="primary--text text-uppercase display-3 font-weight-thin">List</span>
<span class="white--text text-uppercase display-3 font-weight-thin">Series</span>
</v-flex>
<v-flex class="mb-4">
<h4 class="subheading grey--text">Follow the series you've been watching or are still watching!</h4>
</v-flex>
<v-flex>
<v-btn color="primary" depressed flat outline to="/add">
go to add
</v-btn>
</v-flex>
</v-layout>
</v-img>
</v-container>
</div>
</template>

Answer 1

One solution would be to move the image out of the container. Then use style="height: 100%;" align-center d-flex on container to make it fill image area and display contents vertically in the middle. Also you might want to consider image max-height="100vh" to prevent scrolling on smaller screens.
new Vue({
el: '#app'
})
<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">
<template>
<div class="home">
<v-img src="https://images.unsplash.com/photo-1562696482-77619dec0ae7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" max-height="100%">
<v-container style="height: 100%;" align-center d-flex fluid class="pa-0">
<v-layout align-center column>
<v-flex class="mb-2">
<span class="primary--text text-uppercase display-3 font-weight-thin">List</span>
<span class="white--text text-uppercase display-3 font-weight-thin">Series</span>
</v-flex>
<v-flex class="mb-4">
<h4 class="subheading grey--text">Follow the series you've been watching or are still watching!</h4>
</v-flex>
<v-flex>
<v-btn color="primary" depressed flat outline to="/add">
go to add
</v-btn>
</v-flex>
</v-layout>
</v-img>
</v-container>
</div>
</template>
</div>