中心45deg在另一个div内旋转div

Question

我有一个930x180px的主容器。在这个容器里我有一个div。我旋转这个div 45deg，并希望它在我的主容器中水平+垂直居中。

我的居中方法是计算我的div的宽度和高度以旋转并重新定位顶部+左侧值。

我的问题：垂直居中似乎是关闭的，因为你可以在下面的代码中看到 - 左外底显示了一个很好的例子。

如何将旋转的div垂直居中对准主容器？

Codepen：http://codepen.io/anon/pen/JYojVG

//main container
    var box = document.getElementById('box');
//div to rotate
    var lines = document.getElementById('lines');

var boxWidth = box.clientWidth;
var boxHeight = box.clientHeight;
var linesHeight = lines.clientHeight;
var linesWidth = lines.clientWidth;
var linesCenterPointCoordY = linesHeight / 2;
var linesCenterPointCoordX = (linesWidth-boxWidth) / 2;

//center div to box container
lines.style.top = "-" + linesCenterPointCoordY + "px";
lines.style.left = "-" + linesCenterPointCoordX + "px";

//change line rotation
TweenMax.set(lines, {
  rotation: '45',
  transformOrigin: '50% 50%',
})