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:

[![JSFiddle](https://i.stack.imgur.com/fLV6h.png)](https://i.stack.imgur.com/fLV6h.png)

Desired Result:

[![Desired](https://i.stack.imgur.com/AmJTV.png)](https://i.stack.imgur.com/AmJTV.png)