Center vertically a rotated element - html

Question

I want to center the vertically text in a DIV but I can't figure out how. As it is right now, I must use margin-top and manually set the text as centered, but I'm changing the text through jQuery since you can click on the text to make something happen.
.weather-information-paging-left {
background-color : #fafafa;
border-bottom-left-radius : 10px;
cursor : pointer;
height : 100%;
margin-left : -30px;
position : absolute;
width : 60px;
user-select : none;
-moz-user-select : none;
-khtml-user-select : none;
-webkit-user-select : none;
-webkit-user-drag : none;
}
.weather-information-paging-right {
background-color : #fafafa;
border-bottom-right-radius : 10px;
cursor : pointer;
height : 100%;
margin-left : 80px;
position : absolute;
width : 60px;
user-select : none;
-moz-user-select : none;
-khtml-user-select : none;
-webkit-user-select : none;
-webkit-user-drag : none;
}
.weather-information-paging-left-content {
margin-top : 118px;
margin-left : -29px;
width : 120px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.weather-information-paging-right-content {
margin-top : 118px;
margin-left : -29px;
width : 120px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
jsFiddle
How can I make this vertically text dead center in the DIV?

Answer 1

*{margin:0;}
.test{
position:absolute;
background:#ddd;
width:60px;
height:100%;
}
.test span{
position:relative;
display:inline-block;
top:50%; /* Center it vertically */
left:50%; /* Center it horizontally */
height:2.5em;
margin-top:-1.25em; /* - half height (to perfect center it) */
width:100px;
margin-left:-50px; /* - half width (to perfect center it) */
background:#cf5; /* just to see it */
transform: rotate(-90deg); /* after it's all centered, apply rotation */
transform-origin:50% 50%; /* and rotation origin */
}
<div class="test">
<span>The sun and the moon</span>
</div>

Answer 2

Try using this css:
.weather-information-paging-right-content {
margin-top : 118px;
margin-left : -29px;
width : 120px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/* 25% because you have already moved the origin of the div */
position: absolute;
top: 25%;
}