Vue justify-center doesn't center the cards - vuejs2

Question

I want these two cards to be in the center but they appear in the top left corner. What am I missing?
<template>
<div>
<v-layout justify-center>
<v-card color="#132939" height="500" width="200"></v-card>
<v-card color="#a3a4a4" height="500" width="800"> </v-card>
</v-layout>
</div>
</template>
<script>
export default {};
</script>
<style></style>

Answer 1

The most possible reason for this behaviour can be the limited width and height of the parent element (of v-layout), just like in the first example, where I made the div's width to be equal to two cards' width.
If the parent element has a width greater than two cards justify-center prop works as intended (second example - in this case, I set width to auto because it takes the width of the window).
If you want to make cards in the centre on a vertical axis you can use align-center prop but mostly you will have to set the height property for parents elements (third example).
new Vue({
el: '#app',
vuetify: new Vuetify(),
});
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<template>
<div style="width: 100px;">
<v-layout justify-center align-center style="border: 1px solid black">
<v-card color="#132939" height="50" width="20"></v-card>
<v-card color="#a3a4a4" height="50" width="80"> </v-card>
</v-layout>
</div>
</template>
<template>
<div style="width: auto;">
<v-layout justify-center align-center style="border: 1px solid black">
<v-card color="#132939" height="50" width="20"></v-card>
<v-card color="#a3a4a4" height="50" width="80"> </v-card>
</v-layout>
</div>
</template>
<template>
<div style="width: auto; height: 100%">
<v-layout justify-center align-center style="border: 1px solid black; height: 100%">
<v-card color="#132939" height="50" width="20"></v-card>
<v-card color="#a3a4a4" height="50" width="80"> </v-card>
</v-layout>
</div>
</template>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>