title: Vertical center a rotated div inside a div
body: <p>I don't get it ;-(</p>
  
  <p>I want to center a div with a text contained in another div. The inner div is rotated by 90 degres. So far so good. My problem is that I can't get the inner div to align horizontal to the left of the outer div.
  How can this be done?</p>
  
  <p><a href="http://jsfiddle.net/r4vrf7pg/7/" rel="nofollow noreferrer">Here is the fiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="outer"&gt;
      &lt;div class="inner"&gt;
          12345678901234567890
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>div {
      border: 1px solid red;    
  }
  
  .outer {
      position: absolute;
      top: 0px;
      height: 300px; 
      width: 30px;   
  }
  
  .inner {
      transform: translateX(-50%) translateY(-50%) rotate(90deg);
      margin-left: 10px;
      position: relative;
      top: 50%;
      text-align: center;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/1Mbha.png" alt="Painted"></p>