Jak wyrównać obrócony tekst w środku div

Question

Chciałbym wyrównać w pionie obróconego tekstu w środku div o wysokości 100%, jak na obrazku poniżej.

Kiedy zmienia się rozmiar ekranu, tekst pozostaje na środku elementu div.

Ktoś ma rozwiązanie tego problemu?

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

Ten pracował dla mnie: http://davidwalsh.name/css-vertical-text

również próbował użyć flexboxes. Ale ponieważ są one (nadal) nie w pełni obsługiwane przez wszystkie przeglądarki, w szczególności (mobilne) safari - na którym musi działać, idę z bardziej wspieranym podejściem.

Answer 2

No Buddy Dodaj text-align:center z <div> i wtedy zamiast obracać tekst pod kątem 90 stopni! Obróć <div> w 90 stopniach!

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