divの中央にある回転したテキストを整列する方法

Question

以下の画像のように、回転したテキストを100％高さのdivの中央に垂直に整列したいとします。

したがって、画面サイズが変わるたびに、テキストはdivの中央にとどまります。

誰でもこれに対応していますか？

http://jsfiddle.net/SVkPU/1/

.rotate-270 { 
    -o-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -webkit-transform: rotate(270deg); 
    transform:rotate(270deg); 
} 

.left { 
    float:left; 
    background:#000; 
    color:#fff; 
    text-align:center; 
    height:50px; 

} 

.right { 
    float:right; 
    background:#000; 
    color:#fff; 
} 

Answer 1

これが私の仕事： http://davidwalsh.name/css-vertical-text

もflexboxesを使用しようとしました。しかし、彼らは（まだ）すべてのブラウザで特にサポートされていない（携帯）サファリ - それが動作する必要があります私はよりサポートされたアプローチで行く。

Answer 2

まあバディは<div>のtext-align:centerを追加して、代わりに90℃でテキストを回転させます！ <div>を90度回転させてください。

http://jsfiddle.net/KSAqR/1/