How to align the contents to the center of the v-card component in Vuetify?

Question

Currently in the products.vue, I have an array of productList containing 4 objects. I will loop through the array and pass each individual objects to the ProductsItem.vue component. In that component, I will create the cards using vuetify. However, I am unable to align the contents to the centre of the card. Here are my code, a screenshot of my cards and the desired result

Products.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
  }

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>

Answer 1

v-card-title and v-card-actions are flex components so by adding class="justify-center" to both you can centralize the whole thing:

<v-card-title primary-title class="justify-center">
  <div>
    <h3 class="headline pink--text text--accent-2>Superdry</h3>
    <div>Rookie Aviator Patched BomberproductItem.description</div>
  </div>
</v-card-title>
<v-card-actions class="justify-center">
  <v-btn flat color="orange">Add to Cart</v-btn>
</v-card-actions>

I used your own example in the Codepen you provided.

Hope it helps :)