垂直居中旋转文本

Question

我尝试了前面问题的解决方案，但是none成功了。我有 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

要使某个东西居中（因为你使用了变换），你可以在将它定位到它的中心之后，在两个方向上 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);
}

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

垂直居中旋转文本

Vertically centered a rotate text

css

rotation

center