如何在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> text-align:center ，然后不要在90度旋转文本！ 将<div>旋转90度！

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

Answer 2

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

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