title: How to align the contents to the center of the v-card component in Vuetify?
body: <p>Currently in the <strong>products.vue</strong>, 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 create the cards using vuetify.</p>
  
  <p>I am unable to align the contents to the centre of the card.</p>
  
  <p>Here is my code, a screenshot of my cards and the desired result</p>
  
  <p>Products.vue</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;template&gt;
        &lt;div&gt;
          &lt;h1&gt;Products&lt;/h1&gt;
          &lt;v-container class="my-5"&gt;
            &lt;v-layout row wrap&gt;
              &lt;v-flex xs12 sm6 md4 v-for="productItem in productList" 
      :key="productItem.id"&gt;
                &lt;ProductItems :productItem="productItem"/&gt;
              &lt;/v-flex&gt;
            &lt;/v-layout&gt;
          &lt;/v-container&gt;
        &lt;/div&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
      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
          }
        }
      &lt;/script&gt;
  </code></pre>
  
  <p>ProductItem.vue</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;template&gt;
        &lt;v-card flat class="ma-3 text-xs-center"&gt;
        &lt;v-img src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect- 
      ratio="2.75"&gt;&lt;/v-img&gt;
          &lt;v-card-title primary-title&gt;
            &lt;div&gt;
              &lt;h3 class="headline pink--text text--accent-2"&gt; 
      {{productItem.name}}&lt;/h3&gt;
              &lt;div&gt;{{productItem.description}}&lt;/div&gt;
            &lt;/div&gt;
          &lt;/v-card-title&gt;
          &lt;v-card-actions&gt;
            &lt;v-btn flat color="orange"&gt;Add to Cart&lt;/v-btn&gt;
          &lt;/v-card-actions&gt;
        &lt;/v-card&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
      export default {
        props: ["productItem"],
        data() {
          return {};
        }
      };
      &lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/A0XJB.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/A0XJB.jpg" alt="Current result"></a></p>