使用CSS垂直居中旋转文本

我有以下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);
}

见：http://jsfiddle.net/CCMyf/79/

原文地址：https://www.jb51.cc/css/221541.html