Vertically center rotated text with CSS
It may be a bit late for answering that question, but I stumbled on the same issue and found some way of achieving it, by adding another div in the way.
<div class="outer">
<div class='middle'><span class="inner rotate">Centered?</span></div>
</div>
and applying a text-align: center
on that middle element, along with some positioning stuff:
.middle {
margin-left: -200px;
width: 400px;
text-align: center;
position: relative;
left: 7px;
top: 50%;
line-height: 37px;
}
The .inner
also gets a display: inline-block;
to enable both rotate
and text-align
properties.
Here is the corresponding fiddle : http://jsfiddle.net/CCMyf/47/
The key is to set position top and left to 50% and then transformX and transformY to -50%.
.inner {
position: absolute;
top: 50%;
left: 50%;
}
.rotate {
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}
see: http://jsfiddle.net/CCMyf/79/