垂直居中旋转文本

Question

我在之前的问题中尝试了解决方案，但没有一个成功。 我有两个动态文本需要旋转并居中到他们的内容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

要将某些内容（，因为您使用转换）居中，在将其定位到其容器的中心后，您可以translate将其-50%向两个方向转移到#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); } 。

此外，您应将变换原点设置为元素的中心。

所以这应该解决它

{{1}}

http://jsfiddle.net/uwLdox77/

演示