Vuetify - make square v-card with centered text (both axis) - vue.js

Question

I am trying to make a v-card that has card text centered right in the middle of the square. I tried using v-spacer and some other CSS classes that vuetify comes with, but unfortunately while text stays centered horizontally, I am having trouble making it also center vertically.
This code has almost everything working except the vertical centering of the middle text
<v-container fluid>
<v-row>
<v-col cols="6" sm="4">
<v-card rounded color="info">
<v-responsive aspect-ratio="1">
<v-card-title>
Top left - correct
</v-card-title>
<v-card-text class="text-center white--text">
middle center
</v-card-text>
<v-card-actions class="justify-center white--text">
bottom center
</v-card-actions>
</v-responsive>
</v-card>
</v-col>
</v-row>
</v-container>
Here is a JS fiddle with example: https://jsfiddle.net/mrpquke4/3/
Try resizing the browser window with the example above and you will see v-card stays square shape while growing or shrinking(as desired), text stays centered horizontally (as desired), text is not centered vertically (the problem).
JSFiddle:
Desired Result:

Answer 1

Use this css:
.v-responsive__content {
display: flex;
flex-direction: column;
align-items: center;
// justify-content: center; // this will make everything vertical center
justify-content: space-between
}
.v-responsive__content > div {
width: 100%;
}
You can name space the class for any css conflict:
.my-card .v-responsive__content { ... }

Answer 2

You can use align-self on v-col ( align on v-row if you want put in seperate rows) for horizontal and offset on v-col for vertical
<v-row>
<v-col align-self="center" cols="6">
<v-card class="pa-3">align : start</v-card>
</v-col>
<v-col align-self="center" cols="6" offset="3">
<v-card class="pa-3 text-center">align : center</v-card>
</v-col>
<v-col align-self="end" cols="6" offset="6">
<v-card class="pa-3 text-end">align : end</v-card>
</v-col>
</v-row>
Here is the updated jsfiddle : https://jsfiddle.net/tunzLcw5/