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

还尝试使用弹性盒。但由于它们（仍然）没有得到所有浏览器的完全支持，特别是（移动）safari - 它必须工作，所以我采用了更受支持的方法。