Vertically centered a rotate text - css

Question

I tried the solutions in the previous questions, but none was successful.
I've 2 dynamic text that need to be rotated and centered into their content div (left and right).
All the solution that I tried doesn't work
Here's the code:
#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>
Please, could you help me?
Thanks in advance :)
br0k3n

Answer 1

To center something (since you use transforms) you can translate it to -50% in both directions, after positioning it to the center of its container.
Also you should set the transform origin to be at the center of the element.
So this should fix it
#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);
}
Demo at http://jsfiddle.net/uwLdox77/