我有以下HTML：
<div class="outer">
<div class="inner rotate">Centered?</div>
</div>
div.outer是一个窄垂直条。 div.inner旋转90度。我想要的文本“居中？出现在其容器div中心。我不知道事先的div的大小。
这接近：http://jsfiddle.net/CCMyf/2/.你可以从jsfiddle看到文本在变换之前是垂直居中：旋转(-90deg)样式被应用，但有点偏移。当div.outer很短时，这是特别明显。
是否可以垂直居中此文本，而不预先知道任何大小？我没有找到任何解决这个问题的transform-origin的值。
解决方法
关键是将顶部和左边的位置设置为50％，然后将transformX和transformY设置为-50％。
.inner {
position: absolute;
top: 50%;
left: 50%;
}
.rotate {
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}
