使用 CSS 垂直居中旋转文本答案

【问题标题】：Vertically center rotated text with CSS使用 CSS 垂直居中旋转文本
【发布时间】：2013-02-14 19:58:15
【问题描述】：

我有以下 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 值。

【问题讨论】：

你反对在元素上设置display: table吗？因为垂直对齐动态 div 的“标准”方式应该可以毫无问题地使用转换：stackoverflow.com/a/6182661/188221
我不反对display: table。这个小提琴表明表格解决方案与上面的问题相同：jsfiddle.net/4d384
尝试将rotate 类放在中间元素上。应该这样做，但看起来它弄乱了项目的宽度。可能需要使用 padding 或 width 或 height 道具，但它应该是可行的：jsfiddle.net/digthedoug/jWYuq
解决宽度问题比您预期的要困难得多。将min-width: 16px; width: 16px 放在.outer 上会导致与原始问题完全相同的非居中。

标签： css vertical-alignment centering vertical-text

【解决方案1】：

关键是将位置top和left设置为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 我必须在内部元素上添加 margin: 0 以使文本中心完美。
非常感谢。我不是那么远。我不知道为什么，但是如果我像这样首先设置轮换规则：transform: rotate(-90deg) translateX(-50%) translateY(-50%); 它不起作用，如果我把它放在最后，如您的示例所示，它起作用：translateX(-50%) translateY(-50%) rotate(-90deg);。
@MaximeLafarie 我也该死！刚刚了解到变换有一个执行顺序

【解决方案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/

【讨论】：

【解决方案3】：

您能否将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;
}

【讨论】：

这不起作用。这是用“margin：0 auto”更新的小提琴：jsfiddle.net/CCMyf/3。你可以看到那个“？”在“居中？”比“C”离底部更近。

【解决方案4】：

'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 的 display flex 属性设置为 align -items:center 和 justify-content: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/

【讨论】：

【解决方案5】：

另一个将文本旋转 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

【讨论】：

【解决方案6】：

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

把上面的代码去掉就行了？

【讨论】：

这可能使它更接近居中，但它仍然没有正确居中。你可以在这个版本的小提琴中清楚地看到这一点：jsfiddle.net/CCMyf/4

【解决方案7】：

你可以添加这个：

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

到你的.on('change')函数，你可以在这里看到：http://jsfiddle.net/darkajax/hVhbp/

【讨论】：

这可行，但如果可能的话，我更喜欢 CSS 解决方案。
你找到 CSS 解决方案了吗？