jquery - 垂直和水平居中旋转的 div

Question

我试图将窗口内的 DIV 水平和垂直居中。简单一点的 CSS 和 JS。但问题是我的 DIV 旋转了 (-33deg)。

所以我找不到如何正确居中的方法。我尝试使用 transform-origin 和 jQuery 中的计算，但没有成功。

$('mydiv').width() 给我 DIV 未旋转的宽度...不是实际的“对 Angular 线”宽度...(高度相同)。

我无法用固定边距手动修复它，因为网站需要响应...

这可能吗？

这是我需要的结果:

http://hpics.li/497b120

非常感谢您的帮助!

摩根

(对不起，如果我犯了一些英语错误:s)

Answer 1

css 转换、绝对定位和转换原点的组合似乎已经为我完成了。

.element {
  transform: rotateZ(30deg) translateX(-50%) translateY(-50%);
  transform-origin: 0% 0%;
  position: absolute;
  left: 50%;
  top: 50%;
}

小演示:http://jsbin.com/suxawefabe/1/