html - 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

テキストを 90 度回転させるtext-align:centerのではなく、バディを追加します。90度<div>回転！<div>

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

Answer 2

これは私のために働いた： http://davidwalsh.name/css-vertical-text

また、フレックスボックスを使用しようとしました。しかし、それらは（まだ）すべてのブラウザ、特に（モバイル）サファリで完全にサポートされているわけではないため、動作する必要があるため、よりサポートされたアプローチを使用します。