我有以下HTML：
<div class="outer">
<div class="inner rotate">Centered?</div>
</div>
div.outer是一个窄的垂直条带。 div.inner旋转90度。 我想文“为中心？” 到出现在中心在其容器的div。 我也不知道DIV提前大小。
此接近： http://jsfiddle.net/CCMyf/2/ 。 您可以从的jsfiddle看到文本的前垂直居中transform: rotate(-90deg)风格的应用，但之后有所偏移。 这是当格外引人注目div.outer短。
是否可以垂直居中本文不知道任何大小的提前？ 我还没有发现任何值transform-origin是解决这个问题。
关键是要设定的位置的顶部和左至50％，然后transformX和transformY至-50％。
.inner {
position: absolute;
top: 50%;
left: 50%;
}
.rotate {
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}
见： http://jsfiddle.net/CCMyf/79/
这可能是在回答这个问题有点晚了，但我无意中发现了同样的问题，并发现它实现，通过在路上增加一个DIV的一些方法。
<div class="outer">
<div class='middle'><span class="inner rotate">Centered?</span></div>
</div>
并应用text-align: center ，中等元素，具有一定的定位沿东西：
.middle {
margin-left: -200px;
width: 400px;
text-align: center;
position: relative;
left: 7px;
top: 50%;
line-height: 37px;
}
所述.inner还得到一个display: inline-block; 同时启用rotate和text-align属性。
下面是相应的小提琴： http://jsfiddle.net/CCMyf/47/
您可以添加margin: 0 auto; 您的“旋转”类文本居中。
.rotate {
-webkit-transform: rotate(-90deg);
-ff-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 16px; /* transform: rotate() does not rotate the bounding box. */
margin: 0 auto;
}
从“bjnsn”答案是好的，但并不完美，因为它在文本包含在它的空间失败。 比如他用“为本？ 如文本，但如果我们改变了文本，让假设“为中心？ 或不”，那么就不会正常工作和空间后，将采取下一行。 疗法不宽度或用于内的div块限定的高度。
.inner {
font-size: 13px;
font-color: #878787;
position: absolute;
top: 50%;
left: 50%;
background: #DDD;
}
https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/但是，我们可以使整个文本居中对齐正确，通过设定内的div宽度等于外的div的高度内的div，行高等于外部的宽度DIV并设置显示器挠性属性内DIV与对齐项目：中心和证明内容：center属性。
.inner {
font-size: 13px;
font-color: #878787;
position: absolute;
top: 50%;
left: 50%;
display: flex;
justify-content:center;
align-items:center;
line-height:40px;
}
$('#height').on('change', function(e) {
$('.outer').css('height', $('#height').val() + 'px');
$('.inner').css('width', $('#height').val() + 'px');
});
更新小提琴https://jsfiddle.net/touqeer_shakeel/cjL21of5/
删除： margin-top: -7px; 从.inner制作中心对我来说，垂直旋转文本。 这也让水平文本不居中。
只是删除上面的代码？
你可以补充一点：
$('.inner').css('margin-top', $(this).parent().height() - 2*$(this).height());
为了你的.on('change')功能，你可以在这里看到： http://jsfiddle.net/darkajax/hVhbp/
