css - 垂直文本，以 div 居中

Question

我坚持让文本(单行)垂直运行并在其容器中保持居中，从左到右和从上到下。

如何使用 CSS 完成它？

Answer 1

使用 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/

更新:您可以在此生成器中轻松编辑 css3 属性(如 transform):http://css3generator.com/