使用CSS垂直居中旋转文本 [英] Vertically center rotated text with CSS

问题描述

我有以下HTML：

I have the following HTML:

<div class="outer">
    <div class="inner rotate">Centered?</div>
</div>

div.outer 。 div.inner 旋转90度。我想要的文本居中？出现在其容器div中心。我不知道事先的div大小。

div.outer is a narrow vertical strip. div.inner is rotated 90 degrees. I would like the text "Centered?" to appear centered in its container div. I do not know the size of either div in advance.

这是接近： http://jsfiddle.net/CCMyf/2/ 。你可以从jsfiddle看到，在应用 transform：rotate（-90deg）样式之前，文本是垂直居中的，但有点偏移。当 div.outer 很短时，这是特别明显的。

This comes close: http://jsfiddle.net/CCMyf/2/. You can see from the jsfiddle that the text is vertically centered before the transform: rotate(-90deg) style is applied, but is somewhat offset after. This is particularly noticeable when div.outer is short.

的尺寸提前？我没有找到任何解决这个问题的 transform-origin 的值。

Is it possible to center this text vertically without knowing any of the sizes in advance? I haven't found any values of transform-origin that solve this problem.

推荐答案

关键是将顶部和左边的位置设置为50％，然后将transformX和transformY设置为-50％。

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);
}

请参阅：http://jsfiddle.net/CCMyf/79/

这篇关于使用CSS垂直居中旋转文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！