diff --git a/app/client/src/components/editorComponents/DraggableComponent.tsx b/app/client/src/components/editorComponents/DraggableComponent.tsx
index a5cbe41ed3..8dd54a659e 100644
--- a/app/client/src/components/editorComponents/DraggableComponent.tsx
+++ b/app/client/src/components/editorComponents/DraggableComponent.tsx
@@ -163,7 +163,7 @@ function DraggableComponent(props: DraggableComponentProps) {
 
   // Display this draggable based on the current drag state
   const style: CSSProperties = {
-    display: isCurrentWidgetDragging ? "none" : "flex",
+    display: isCurrentWidgetDragging ? "none" : "block",
   };
 
   // WidgetBoundaries
@@ -172,6 +172,10 @@ function DraggableComponent(props: DraggableComponentProps) {
       style={{
         opacity:
           isResizingOrDragging && selectedWidget !== props.widgetId ? 1 : 0,
+        position: "absolute",
+        transform: `translate(-50%, -50%)`,
+        top: "50%",
+        left: "50%",
       }}
     />
   );