使用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中看到，在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”的答案很好，但并不完美，因为当文本中包含空格时，答案将失败。例如，他使用“居中？” 作为文本，但是如果我们将文本更改为假设“居中？否”，那么它将无法正常工作，并且会占用空格后的下一行。Ther不是为内部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并使用align-items：center和justify-content：center属性设置内部div的display flex属性。

.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/

将文本旋转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 / EDGEwriting-mode中的不良支持而无法在此处使用：https： //developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

删除：margin-top: -7px;从中.inner使垂直旋转的文本对我居中。这也使水平文本不居中。

只需删除上面的代码？

您可以添加以下内容：

$('.inner').css('margin-top', $(this).parent().height() - 2*$(this).height());

对于您的.on('change')功能，您可以在这里看到：http : //jsfiddle.net/darkajax/hVhbp/