How to align rotated text in the middle of a div

问题:

I would like to vertical align rotated text in the middle of a 100% height div, like the image below.

So whenever the screen size changes the text stays in the middle of the div.

Anyone has a solution for this?

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;
}

回答1:

Well Buddy Add text-align:center of the <div> and then instead of rotating text at 90 deg! Rotate the <div> at 90 deg!

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

回答2:

This worked for me: http://davidwalsh.name/css-vertical-text

also tried to use flexboxes. But as they are (still) not fully supported by all browsers especially (mobile) safari - on which it must work I go with a more supported approach.