Center content in Vuetify project / Grid system - vue.js

Question

I am starting learning Vue.js and I got a problem with understanding Vuetify's grid system. Now I want to center that content to the center. I've read docs and tried for many ways, but positioning elements it is still random, I would say.
Can anybody explain me v-content, v-layout and v-flex?
Here's code.
<template>
<v-container>
<v-layout text-center>
<v-flex xs4 >
<v-img
:src="require('../assets/logo.svg')"
class="my-3"
contain
height="200"
>
</v-img>
<v-text-field v-model="newPrice" placeholder="Add price"></v-text-field>
<v-btn #click="addPrices">Add price </v-btn>
<v-text-field v-model="newVolume" placeholder="Add volume"></v-text-field>
<v-btn #click="AddVolume">Add volume </v-btn>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
name: 'MainPage',
data () {
return {
prices: [],
volumes: [],
newPrice: '',
newVolume: ''
}
},
methods: {
addPrices () {
this.prices.push(this.newPrice)
},
addVolume () {
this.volumes.push(this.newVolume)
}
}
}
</script>

Answer 1

So vuetify's grid system takes advantage of CSS flexbox. v-container determines the spacing around and between elements; v-layout determines the flex axis/direction/order of the elements, and v-flex determines how big the elements will be in the 12-point grid system.
To center something, try the below:
<v-layout row justify-center></v-layout>
This is equivalent to:
.layout {
display: flex;
flex-direction: row;
justify-content: center;
}
There is no prop in the v-layout component named text-center so I'm guessing that's why it's not centering.