Wie gedrehten Text in der Mitte eines div ausrichten

Question

Ich möchte vertikal gedrehten Text in der Mitte einer 100% Höhe div, wie das Bild unten ausrichten.

Also immer wenn sich die Bildschirmgröße ändert bleibt der Text in der Mitte des div.

Hat jemand eine Lösung dafür?

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

Das ist für mich gearbeitet: http://davidwalsh.name/css-vertical-text

auch flexboxes zu nutzen versucht. Da sie aber (noch) nicht vollständig von allen Browsern unterstützt werden, insbesondere (mobile) Safari - auf denen es funktionieren muss, gehe ich mit einem eher unterstützten Ansatz vor.

Answer 2

Nun Buddy text-align:center der <div> hinzufügen und dann stattdessen Text bei 90 ° zu drehen! Drehen Sie die <div> um 90 Grad!

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