css - 垂直文本，以div为中心

我一直坚持使文本（单行）垂直运行，并在其容器中居中，从左到右，从上到下。



如何使用CSS完成它？

最佳答案

使用transform属性旋转div这是css，padding用于使垂直中心对齐，而text-align用于使水平中心对齐。跨浏览器解决方案：

div {
    margin: 50px;
    width: 100px;
    text-align: center;
    height: 50px;
    background: red;
    -moz-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -webkit-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -o-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -ms-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
p {
    margin: auto;
    padding: 15px;
}

现场演示：http://jsfiddle.net/YANxZ/

UPD：您可以在此生成器中轻松编辑css3属性（如transform）：http://css3generator.com/