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 create the cards using vuetify.

I am unable to align the contents to the centre of the card.

Here is 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         }       }     </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> 

Answer 1

Update : Works in both version of Vuetify 1.5 and 2:

To centralize v-card-text content just apply the class=text-center

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> 

Answer 2

you can also use v-spacer to center components in v-card

<v-card-title>   <v-spacer />   <div class="text-center">     <h3 class="headline pink--text text--accent-2">Headline</h3>     <div>Some description about the headline</div>   </div>   <v-spacer /> </v-card-title> <v-card-actions>   <v-spacer />   <v-btn color="orange">Some Button</v-btn>   <v-spacer /> </v-card-actions>