如何對齊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。但是，由於它們（仍然）沒有得到所有瀏覽器，特別是（移動）safari的全面支持 - 它必須在其上工作，所以我採用了更受支持的方法。

Answer 2

嘛好友添加<div>的text-align:center，然後，而不是在90度旋轉的文字！ 90度旋轉<div>！

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