diff --git a/docs/examples-docs/card.md b/docs/examples-docs/card.md
index ac01a52ae..82a0a1b8a 100644
--- a/docs/examples-docs/card.md
+++ b/docs/examples-docs/card.md
@@ -86,4 +86,5 @@ export default {
 | title | 自定义标题 |
 | desc | 自定义描述 |
 | tags | 自定义tags |
+| thumb | 自定义thumb |
 | footer | 自定义footer |
diff --git a/packages/card/src/card.vue b/packages/card/src/card.vue
index b51d5fdb1..9860cbade 100644
--- a/packages/card/src/card.vue
+++ b/packages/card/src/card.vue
@@ -1,18 +1,20 @@
 <template>
-  <div class="van-card">
-    <img :src="thumb" alt="" class="van-card__img">
-    <div class="van-card__content" :class="{'van-card__content--center': !this.$slots.footer}">
-      <div class="van-card__info">
-        <slot name="title">
-          <h4 v-text="title" class="van-card__title"></h4>
-        </slot>
-        <slot name="desc">
-          <p v-if="desc" v-text="desc" class="van-card__desc"></p>
-        </slot>
-        <slot name="tags"></slot>
-      </div>
-      <slot name="footer"></slot>
+  <div :class="['van-card', { 'van-card--center': !$slots.footer }]">
+    <div class="van-card__thumb">
+      <slot name="thumb">
+        <img :src="thumb" class="van-card__img" />
+      </slot>
     </div>
+    <div class="van-card__content">
+      <slot name="title">
+        <h4 v-text="title" class="van-card__title"></h4>
+      </slot>
+      <slot name="desc">
+        <p v-if="desc" v-text="desc" class="van-card__desc"></p>
+      </slot>
+      <slot name="tags"></slot>
+    </div>
+    <slot name="footer"></slot>
   </div>
 </template>
 
@@ -20,10 +22,7 @@
 export default {
   name: 'van-card',
   props: {
-    thumb: {
-      type: String,
-      required: true
-    },
+    thumb: String,
     title: String,
     desc: String
   }
diff --git a/packages/vant-css/src/card.css b/packages/vant-css/src/card.css
index 7cd6a1bc0..31916fd60 100644
--- a/packages/vant-css/src/card.css
+++ b/packages/vant-css/src/card.css
@@ -1,93 +1,93 @@
 @import './mixins/ellipsis.css';
 
-@component-namespace van {
-  @b card {
-    padding: 5px 15px 5px 115px;
-    height: 90px;
-    background: #FAFAFA;
-    overflow: hidden;
-    position: relative;
+.van-card {
+  color: #333;
+  height: 90px;
+  background: #fafafa;
+  position: relative;
+  padding: 5px 15px 5px 115px;
+
+  &:not(:first-child) {
     margin-top: 10px;
+  }
 
-    &:first-child {
-      margin-top: 0;
+  &--center,
+  &__thumb {
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__thumb {
+    top: 5px;
+    left: 15px;
+    width: 90px;
+    height: 90px;
+    position: absolute;
+
+    img {
+      border: none;
+      max-width: 100%;
+      max-height: 100%;
     }
+  }
 
-    @e img {
-      width: 90px;
-      height: auto;
-      border: 0;
-      position: absolute;
-      top: 5px;
-      left: 15px;
+  &,
+  &__thumb,
+  &__row {
+    display: flex;
+  }
+
+  &__content {
+    width: 100%;
+
+    &--center {
+      height: 90px;
+      align-items: center;
     }
+  }
 
-    @e content {
-      display: table;
-      width: 100%;
+  &__title,
+  &__desc {
+    line-height: 20px;
+    word-break: break-all;
+  }
 
-      @m center {
-        display: table;
-        height: 90px;
+  &__title {
+    max-height: 40px;
+    @mixin multi-ellipsis 2;
+  }
 
-        .van-card__info {
-          display: table-cell;
-          vertical-align: middle;
-        }
-      }
-    }
+  &__desc {
+    color: #666;
+    font-size: 12px;
+    max-height: 20px;
+    @mixin multi-ellipsis 1;
+  }
 
-    @e row {
-      overflow: hidden;
-      padding-right: 80px;
-      position: relative;
-    }
+  &__price,
+  &__num {
+    flex: 1;
+    min-width: 80px;
+    line-height: 20px;
+    text-align: right;
+  }
 
-    @e title {
-      line-height: 20px;
-      color: #333;
-      max-height: 40px;
-      margin-bottom: 5px;
-      word-break: break-all;
-      @mixin multi-ellipsis 2;
-    }
+  &__price {
+    font-size: 14px;
+  }
 
-    @e desc {
-      font-size: 12px;
-      color: #666;
-      max-height: 20px;
-      word-break: break-all;
-      @mixin multi-ellipsis 1;
-    }
+  &__num {
+    color: #666;
+    font-size: 12px;
+  }
 
-    @e price {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 80px;
-      text-align: right;
-      font-size: 14px;
-      color: #333;
-    }
+  &__footer {
+    right: 15px;
+    bottom: 5px;
+    position: absolute;
 
-    @e num {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 80px;
-      text-align: right;
-      font-size: 12px;
-      color: #666;
-    }
-
-    @e footer {
-      position: absolute;
-      right: 15px;
-      bottom: 5px;
-
-      .van-button {
-        margin-left: 5px;
-      }
+    .van-button {
+      margin-left: 5px;
     }
   }
 }