84

我有以下 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解决这个问题的任何值。

4

7 回答 7

166

关键是将位置 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/

于 2014-06-19T21:28:13.303 回答
6

回答这个问题可能有点晚了，但我偶然发现了同样的问题，并通过添加另一个 div 找到了实现它的方法。

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

并在该中间元素上应用 atext-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/

于 2014-03-20T11:41:45.810 回答
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

于 2019-12-26T19:17:15.970 回答
2

您可以添加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;
}
于 2013-02-28T15:04:12.023 回答
2

'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 并使用 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/

于 2016-09-30T10:35:05.077 回答
0

你可以添加这个：

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

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

于 2013-02-28T15:08:25.287 回答
0

删除 : margin-top: -7px;from.inner使垂直旋转的文本以我为中心。它还使水平文本不居中。

只是删除上面的代码？

于 2013-02-28T15:05:38.100 回答