jQuery中心使用.position在div中水平和垂直旋转图像

以下是我的小提琴示例：

我试图使用.position UI方法使图像在容器div中居中

 $draggable.position({ of: $canvas, my: 'center', at: 'center' });

有人能帮我让这个图像在旋转时在画布div中水平和垂直居中吗？特别是在角度90和270处

它不起作用。任何其他解决方案都可以

谢谢

编辑：

要使图像旋转，请单击图像。

我找到了一个解决方案：

我只是在玩边距游戏：

 var canvasWidth = parseInt($("." + $canvas.attr("class").replace(" ", ".")).width());
 var canvasHeight = parseInt($("." + $canvas.attr("class").replace(" ", ".")).height());
 var offsetLeft = (canvasWidth - $draggable.width()) / 2;
 var offsetTop = (canvasHeight - $draggable.height()) / 2;
 $draggable.css({ 'margin-top': offsetTop - 2, 'margin-left': offsetLeft });

---

在你的JSFIDLE中，我不知道如何使画布旋转到90度或270度。很抱歉，我本应该说清楚。单击图像。FIDLE不再存在-请删除此问题。FIDLE解决方案已删除-1.