使用CSS实现旋转文本的垂直居中

Question

我有以下HTML代码：

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

是一条狭窄的垂直条纹，

被旋转了90度。我希望文本“居中？”出现在其容器div的中心位置。我不知道两个div的大小。

这个方案接近：http://jsfiddle.net/CCMyf/2/。您可以从jsfiddle中看到，在应用transform: rotate(-90deg)样式之前，文本垂直居中，但在此之后有些偏移。当

很短时，这尤其明显。

是否可能在不提前知道任何尺寸的情况下垂直居中此文本？我没有找到任何解决此问题的transform-origin值。

- danvk

---

你是否反对在元素上设置 display: table？因为使用“标准”方法来垂直对齐动态div应该可以通过变换而无需问题：https://dev59.com/eXRC5IYBdhLWcg3wJNmf#6182661 - DigTheDoug

我不反对使用display: table。这个fiddle显示表格解决方案与上面的解决方案存在相同的问题：http://jsfiddle.net/4d384/。 - danvk

尝试在中间元素上添加“rotate”类。那应该就可以了，但看起来会影响项目的宽度。可能需要调整填充、宽度或高度属性，但应该是可行的：http://jsfiddle.net/digthedoug/jWYuq/ - DigTheDoug

修复宽度问题比你想象的要困难得多。在 .outer 上放置 min-width: 16px; width: 16px 会导致与原始问题完全相同的非居中。 - danvk

Answer 1

关键是将位置的上下左右设置为50%，然后将transformX和transformY设置为-50%。

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

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

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

- bjnsn

---

使用文本元素而不是div，我不得不在内部元素上添加'margin: 0'，以使文本完美居中。 - kapoko

非常感谢。我并没有离谱。我不知道为什么，但如果我首先设置旋转规则，如下所示：transform: rotate(-90deg) translateX(-50%) translateY(-50%); 它不起作用，而如果我像你的例子那样把它放在最后，它就可以工作了：translateX(-50%) translateY(-50%) rotate(-90deg);。 - Maxime Lafarie

@MaximeLafarie 真是太可怕了！我也刚学到transform有执行顺序。 - Warface

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 属性。

以下是相应的 fiddle 链接：http://jsfiddle.net/CCMyf/47/

- Pascal M

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

- wwwebman

Answer 4

'bjnsn'的答案很好，但不完美，因为当文本中包含空格时会失败。例如，他使用了'Centered?'作为文本，但如果我们将文本更改为'Centered?或not'，那么它将无法正常工作，并且将在空格后面换行。内部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属性的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/

- user3809178

Answer 5

您可以在“rotate”类中添加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;
}

- 97ldave

---

这个不起作用。这是更新了“margin: 0 auto”的jsfiddle链接：http://jsfiddle.net/CCMyf/3/。你可以看到，“Centering?”中的“？”比底部的“C”更靠近顶部。 - danvk

Answer 6

移除 .inner 中的 margin-top: -7px; 让我垂直旋转的文本居中了。但是这也导致水平文本不再居中。

只需要移除上述代码吗？

- Michael

---

这可能使它更接近于居中，但它仍然没有正确居中。您可以在此版本的fiddle中清楚地看到：http://jsfiddle.net/CCMyf/4/ - danvk

Answer 7

你可以添加这个：

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

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

- DarkAjax

---

这个可以用，但如果可能的话，我非常希望有一个CSS解决方案。 - danvk

你找到了CSS的解决方案吗？ - Crashalot