diff --git a/components/vc-slider/src/common/Marks.tsx b/components/vc-slider/src/common/Marks.tsx
index 286b3c323..d11c41090 100644
--- a/components/vc-slider/src/common/Marks.tsx
+++ b/components/vc-slider/src/common/Marks.tsx
@@ -40,7 +40,8 @@ const Marks = (_: any, { attrs, slots }: any) => {
       });
 
       const bottomStyle = {
-        marginBottom: '-50%',
+        transform: `translateY(${reverse ? `-50%` : `50%`})`,
+        msTransform: `translateY(${reverse ? `-50%` : `50%`})`,
         [reverse ? 'top' : 'bottom']: `${((point - min) / range) * 100}%`,
       };
 
diff --git a/components/vc-slider/src/common/Steps.tsx b/components/vc-slider/src/common/Steps.tsx
index 793a35ec4..28f62857f 100644
--- a/components/vc-slider/src/common/Steps.tsx
+++ b/components/vc-slider/src/common/Steps.tsx
@@ -53,8 +53,18 @@ const Steps = (_: any, { attrs }) => {
       (!included && point === upperBound) ||
       (included && point <= upperBound && point >= lowerBound);
     let style = vertical
-      ? { ...dotStyle, [reverse ? 'top' : 'bottom']: offset }
-      : { ...dotStyle, [reverse ? 'right' : 'left']: offset };
+      ? {
+          ...dotStyle,
+          [reverse ? 'top' : 'bottom']: offset,
+          transform: `translateY(${reverse ? '-50%' : '50%'})`,
+          msTransform: `translateY(${reverse ? '-50%' : '50%'})`,
+        }
+      : {
+          ...dotStyle,
+          [reverse ? 'right' : 'left']: offset,
+          transform: `translateX(${reverse ? '50%' : '-50%'})`,
+          msTransform: `translateX(${reverse ? '50%' : '-50%'})`,
+        };
     if (isActived) {
       style = { ...style, ...activeDotStyle };
     }