title: Centering 45deg rotated div within another div
body: <p>I have a main container of 930x180px. Within this container I have a div. Im rotating this div 45deg and looking to center it horizontal + vertical within my main container.</p>
  
  <p>My approach for the centering has been to calculate width and height of my div to rotate and re-position top + left values.</p>
  
  <p>My issue: is that the vertical centering seems to be off as you will be able to seen in the below codepen - the outer left bottom shows a good example of this.</p>
  
  <p>How do I center my rotated div vertically correct to the main container?</p>
  
  <p>Codepen: <a href="http://codepen.io/anon/pen/JYojVG" rel="nofollow">http://codepen.io/anon/pen/JYojVG</a></p>
  
  <pre><code>//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%',
  })
  </code></pre>