diff --git a/packages/devui-vue/devui/tag/src/hooks/use-class.ts b/packages/devui-vue/devui/tag/src/hooks/use-class.ts
index 0a5015a92a..e5afcc476a 100644
--- a/packages/devui-vue/devui/tag/src/hooks/use-class.ts
+++ b/packages/devui-vue/devui/tag/src/hooks/use-class.ts
@@ -3,7 +3,9 @@ import { tagProps, TagProps } from '../tag-types'
 
 export default function (props: TagProps) {
   return computed(() => {
-    const { type, color } = props
-    return `devui-tag devui-tag-${type || (color ? 'colorful' : '') || 'default'}`
+    const { type, color, deletable } = props
+    return `devui-tag devui-tag-${type || (color ? 'colorful' : '') || 'default'} ${
+      deletable ? 'devui-tag-deletable' : ''
+    }`
   })
 }
diff --git a/packages/devui-vue/devui/tag/src/tag.scss b/packages/devui-vue/devui/tag/src/tag.scss
index 0ef0d58515..ea9cb49551 100644
--- a/packages/devui-vue/devui/tag/src/tag.scss
+++ b/packages/devui-vue/devui/tag/src/tag.scss
@@ -28,6 +28,9 @@ $devui-tag-normal-config: (
   ),
   colorful: (
     background-color: #fff
+  ),
+  deletable: (
+    padding-right: 32px
   )
 );
 
@@ -48,7 +51,7 @@ $devui-tag-normal-config: (
     position: relative;
     cursor: default;
 
-    @each $type in default, primary, success, warning, danger, colorful {
+    @each $type in default, primary, success, warning, danger, colorful, deletable {
       &.devui-tag-#{$type} {
         @each $key, $value in map-get($devui-tag-normal-config, $type) {
           #{$key}: $value;
@@ -66,8 +69,12 @@ $devui-tag-normal-config: (
     line-height: 12px;
     border-radius: 50%;
     text-align: center;
-    position: relative;
-    top: -0.22em;
-    vertical-align: middle;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    i {
+      /* 取消icon自带的偏移 */
+      vertical-align: 0;
+    }
   }
 }