如何在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

好吧好友添加text-align:center <div>，然后在90度旋转文字！将<div>旋转90度！

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

Answer 2

这对我有用： http://davidwalsh.name/css-vertical-text

也尝试使用flexboxes。但是，由于它们（仍然）没有完全支持所有浏览器，特别是（移动）Safari，它必须工作，我采用更支持的方法。