Как выровнять содержимое по центру компонента v-card в Vuetify?

В настоящее время в продукты.vue у меня есть массив productList, содержащий 4 объекта. Я пройдусь по массиву и передам каждый отдельный объект компоненту ProductsItem.vue. В этом компоненте я создаю карты с помощью vuetify.

Я не могу выровнять содержимое по центру карты.

Вот мой код, скриншот моих карт и желаемый результат

Продукты.vue

    <template>
      <div>
        <h1>Products</h1>
        <v-container class = "my-5">
          <v-layout row wrap>
            <v-flex xs12 sm6 md4 v-for = "productItem in productList" 
    :key = "productItem.id">
              <ProductItems :productItem = "productItem"/>
            </v-flex>
          </v-layout>
        </v-container>
      </div>
    </template>

    <script>
    import ProductItems from "@/components/ProductItems";


    export default {
      data() {
        return {
          productList: [
            {
              id: 1,
              name: "Superdry",
              description: "Rookie Aviator Patched Bomber"
            },
            {
              id: 2,
              name: "SuperHot",
              description: "Rookie Aviator Patched Bomber"
            },
            {
              id: 3,
              name: "Buron MensWear",
              description: "Skinny Fit Oxford Shirt In White"
            },
            {
              id: 4,
              name: "Asos",
              description: "slim shirt with stretch in blue"
            }
          ]
        };
      },

        components: {
          ProductItems
        }
      }
    </script>

ProductItem.vue

    <template>
      <v-card flat class = "ma-3 text-xs-center">
      <v-img src = "https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect- 
    ratio = "2.75"></v-img>
        <v-card-title primary-title>
          <div>
            <h3 class = "headline pink--text text--accent-2"> 
    {{productItem.name}}</h3>
            <div>{{productItem.description}}</div>
          </div>
        </v-card-title>
        <v-card-actions>
          <v-btn flat color = "orange">Add to Cart</v-btn>
        </v-card-actions>
      </v-card>
    </template>

    <script>
    export default {
      props: ["productItem"],
      data() {
        return {};
      }
    };
    </script>

<style>
</style>