Cách căn chỉnh văn bản được xoay ở giữa một div

Question

Tôi muốn căn dọc văn bản xoay ở giữa một div chiều cao 100%, như hình dưới đây.

Vì vậy, bất cứ khi nào kích thước màn hình thay đổi văn bản nằm ở giữa div.

Bất kỳ ai có giải pháp cho điều này?

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

này đã làm việc cho tôi: http://davidwalsh.name/css-vertical-text

cũng cố gắng sử dụng flexboxes. Nhưng vì chúng (vẫn) không được hỗ trợ đầy đủ bởi tất cả các trình duyệt đặc biệt là (di động) safari - mà nó phải hoạt động, tôi đi với một cách tiếp cận được hỗ trợ nhiều hơn.

Answer 2

Vâng Buddy Thêm text-align:center của <div> và sau đó thay vì xoay văn bản ở 90 độ! Xoay <div> ở 90 độ!

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