diff --git a/packages/arco-vue-scripts/src/configs/vite.dev.ts b/packages/arco-vue-scripts/src/configs/vite.dev.ts
index dd18dd62b..227401ed9 100644
--- a/packages/arco-vue-scripts/src/configs/vite.dev.ts
+++ b/packages/arco-vue-scripts/src/configs/vite.dev.ts
@@ -29,6 +29,7 @@ export default defineConfig({
   plugins: [
     external(),
     vue(),
+    // @ts-ignore
     vueJsx(),
     eslint({
       include: [
diff --git a/packages/arco-vue-scripts/src/configs/vite.material.prod.ts b/packages/arco-vue-scripts/src/configs/vite.material.prod.ts
index 6c79d9df4..d9b7a6420 100644
--- a/packages/arco-vue-scripts/src/configs/vite.material.prod.ts
+++ b/packages/arco-vue-scripts/src/configs/vite.material.prod.ts
@@ -53,6 +53,7 @@ const getConfig = ({
         formats: ['es'],
       },
     },
+    // @ts-ignore
     plugins: [vue(), vueJsx(), svgLoader()],
   };
 };
diff --git a/packages/arco-vue-scripts/src/configs/vite.site.dev.ts b/packages/arco-vue-scripts/src/configs/vite.site.dev.ts
index f834177bb..9ee9fb86a 100644
--- a/packages/arco-vue-scripts/src/configs/vite.site.dev.ts
+++ b/packages/arco-vue-scripts/src/configs/vite.site.dev.ts
@@ -38,7 +38,9 @@ export default defineConfig({
   plugins: [
     vueDocs(),
     vue(),
+    // @ts-ignore
     vueJsx(),
+    // @ts-ignore
     svgLoader({ svgoConfig: {} }),
     eslint({
       // hmr情况下cache存在问题
diff --git a/packages/arco-vue-scripts/src/configs/vite.site.prod.ts b/packages/arco-vue-scripts/src/configs/vite.site.prod.ts
index 9adbf210e..999b2aa74 100644
--- a/packages/arco-vue-scripts/src/configs/vite.site.prod.ts
+++ b/packages/arco-vue-scripts/src/configs/vite.site.prod.ts
@@ -33,5 +33,6 @@ export default defineConfig({
   build: {
     target: 'es2015',
   },
+  // @ts-ignore
   plugins: [vueDocs(), vue(), vueJsx(), svgLoader({ svgoConfig: {} })],
 }) as InlineConfig;
diff --git a/packages/web-vue/components/message/message.vue b/packages/web-vue/components/message/message.vue
index 858a764ed..4f2572428 100644
--- a/packages/web-vue/components/message/message.vue
+++ b/packages/web-vue/components/message/message.vue
@@ -1,38 +1,40 @@
 <template>
-  <li
-    role="alert"
-    :class="[
-      prefixCls,
-      `${prefixCls}-${type}`,
-      { [`${prefixCls}-closable`]: closable },
-    ]"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
-  >
-    <span
-      v-if="showIcon && !(type === 'normal' && !$slots.icon)"
-      :class="`${prefixCls}-icon`"
-    >
-      <slot name="icon">
-        <icon-info-circle-fill v-if="type === 'info'" />
-        <icon-check-circle-fill v-else-if="type === 'success'" />
-        <icon-exclamation-circle-fill v-else-if="type === 'warning'" />
-        <icon-close-circle-fill v-else-if="type === 'error'" />
-        <icon-loading v-else-if="type === 'loading'" />
-      </slot>
-    </span>
-    <span :class="`${prefixCls}-content`">
-      <slot />
-    </span>
-    <span
-      v-if="closable"
-      :class="`${prefixCls}-close-btn`"
-      @click="handleClose"
+  <li :class="`${prefixCls}-item-wrapper`">
+    <div
+      role="alert"
+      :class="[
+        prefixCls,
+        `${prefixCls}-${type}`,
+        { [`${prefixCls}-closable`]: closable },
+      ]"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
     >
-      <a-icon-hover>
-        <icon-close />
-      </a-icon-hover>
-    </span>
+      <span
+        v-if="showIcon && !(type === 'normal' && !$slots.icon)"
+        :class="`${prefixCls}-icon`"
+      >
+        <slot name="icon">
+          <icon-info-circle-fill v-if="type === 'info'" />
+          <icon-check-circle-fill v-else-if="type === 'success'" />
+          <icon-exclamation-circle-fill v-else-if="type === 'warning'" />
+          <icon-close-circle-fill v-else-if="type === 'error'" />
+          <icon-loading v-else-if="type === 'loading'" />
+        </slot>
+      </span>
+      <span :class="`${prefixCls}-content`">
+        <slot />
+      </span>
+      <span
+        v-if="closable"
+        :class="`${prefixCls}-close-btn`"
+        @click="handleClose"
+      >
+        <a-icon-hover>
+          <icon-close />
+        </a-icon-hover>
+      </span>
+    </div>
   </li>
 </template>
 
diff --git a/packages/web-vue/components/message/style/index.less b/packages/web-vue/components/message/style/index.less
index 28e0e8244..78cd36e4c 100644
--- a/packages/web-vue/components/message/style/index.less
+++ b/packages/web-vue/components/message/style/index.less
@@ -6,16 +6,12 @@
 .@{message-prefix-cls}-list {
   position: fixed;
   z-index: @z-index-message;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   box-sizing: border-box;
   width: 100%;
   margin: 0;
-  padding: 0 10px;
+  padding: 0;
   text-align: center;
   pointer-events: none;
-  left: 0;
 
   &-top {
     top: @message-wrapper-margin-top;
@@ -26,11 +22,17 @@
   }
 }
 
+.@{message-prefix-cls}-item-wrapper {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 10px;
+}
 .@{message-prefix-cls} {
   position: relative;
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  margin-bottom: @message-margin-bottom;
+  width: fit-content;
+  margin: 0 auto @message-margin-bottom;
   padding: @message-padding-top @message-padding-right @message-padding-bottom
     @message-padding-left;
   overflow: hidden;
@@ -56,8 +58,8 @@
   }
 
   &-content {
-    font-size: @message-font-size-content;
     color: @message-normal-color-content;
+    font-size: @message-font-size-content;
     vertical-align: middle;
   }
 
@@ -140,34 +142,29 @@
 }
 
 .fade-message-enter-from,
-.fade-message-appear-from {
+.fade-message-appear-from,
+.fade-message-leave-to {
   opacity: 0;
 }
 
 .fade-message-enter-to,
-.fade-message-appear-to {
+.fade-message-appear-to,
+.fade-message-leave-from {
   opacity: 1;
 }
 
 .fade-message-enter-active,
-.fade-message-appear-active {
+.fade-message-appear-active,
+.fade-message-leave-active {
   transition: opacity @transition-duration-1 @transition-timing-function-linear;
 }
 
-.fade-message-leave-from {
-  opacity: 1;
-}
-
-.fade-message-leave-to {
-  opacity: 0;
-}
-
 .fade-message-leave-active {
   position: absolute;
 }
 
-.flip-list-move {
-  transition: transform 0.8s ease;
+.fade-message-move {
+  transition: all 0.4s ease;
 }
 
 @keyframes ~ '@{prefix}-msg-fade' {