使用CSS垂直居中旋转文本

Question

我有以下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解决这个问题的价值观.

Answer 1

关键是将位置顶部和左侧设置为50%,然后将X和transformY设置为-50%.

.inner {
    position: absolute;
    top: 50%;
    left: 50%;
}

.rotate {  
    transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
}

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

Answer 2

回答这个问题可能有点晚了,但我偶然发现了同样的问题并找到了实现它的方法,通过添加另一个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/

Answer 3

将文本旋转 90 度并以 Y 轴为中心的另一个选项是：

.rotate-centered {
    top: 50%;
    right: 50%;
    position: absolute;
    transform: scale(-1) translate(-50%, 50%);
    writing-mode: vertical-lr;
 }

<span class="rotate-centered">Text<span>

示例： https: //codepen.io/wwwebman/pen/KKwqErL

但由于 IE/EDGE 的支持不佳，writing-mode在那里不起作用： https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode