title: Vertically center rotated text with CSS
body: <p>I have the following HTML:
  </p>
  
  <pre><code>&lt;div class="outer"&gt;
      &lt;div class="inner rotate"&gt;Centered?&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>div.outer</code> is a narrow vertical strip. <code>div.inner</code> is rotated 90 degrees. I would like the text "Centered?" to appear centered in its container div. I do not know the size of either div in advance.</p>
  
  <p>This comes close: <a href="http://jsfiddle.net/CCMyf/2/" rel="noreferrer">http://jsfiddle.net/CCMyf/2/</a>. You can see from the jsfiddle that the text is vertically centered before the <code>transform: rotate(-90deg)</code> style is applied, but is somewhat offset after. This is particularly noticeable when <code>div.outer</code> is short.</p>
  
  <p>Is it possible to center this text vertically without knowing any of the sizes in advance? I haven't found any values of <code>transform-origin</code> that solve this problem.</p>