如何对齐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/