css - 垂直居中旋转文本

Question

我尝试了前面问题中的解决方案，但都没有成功。我有 2 个动态文本需要旋转并居中到它们的内容 div(左和右)。我尝试的所有解决方案均无效

代码如下:

#sideLeft span,
#sideRight span {
bottom: 50%;
display: block;
line-height: 0em;
position: absolute;
text-align: center;
top: 50%;
white-space:nowrap;
width: 100%;
}

#sideLeft span {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}

#sideRight span {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}

#sideLeft,
#sideRight {
height: 100%;
position: fixed;
top: 0;
width: 18%;
}

#sideLeft {
left: 0;
}

#sideRight {
right: 0;
}

<div id="sideLeft"><span>Left text lorem ipsum sit amet</div>
<div id="sideRight"><span>Right text pellentesque lectus erat, condimentum quis sem vitae, facilisis </span></div>

请问，你能帮帮我吗？

提前致谢:)

br0k3n

Answer 1

要使某物居中(因为你使用了变换)，你可以在将它定位到其容器的中心。

您还应该将变换原点设置在元素的中心。

所以这应该可以解决它

#sideLeft span, #sideRight span {
    top: 50%;
    left:50%;
    position: absolute;
    text-align: center;
    white-space:nowrap;

    -webkit-transform-transform-origin:50% 50%;
    -moz-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    -0-transform-origin:50% 50%;
    transform-origin:50% 50%;
}
#sideLeft span {
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
    -moz-transform: translate(-50%, -50%) rotate(-90deg);
    -ms-transform: translate(-50%, -50%) rotate(-90deg);
    -o-transform: translate(-50%, -50%) rotate(-90deg);
    transform: translate(-50%, -50%) rotate(-90deg);
}
#sideRight span {
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    -moz-transform: translate(-50%, -50%) rotate(90deg);
    -ms-transform: translate(-50%, -50%) rotate(90deg);
    -o-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(90deg);
}

演示在 http://jsfiddle.net/uwLdox77/