用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)之前是垂直居中的transform: rotate(-90deg)风格被应用，但是稍后有些偏移。 当div.outer短时，这一点尤为明显。

是否可以在不知道任何尺寸的情况下垂直居中？ 我还没有find解决这个问题的任何transform-origin价值。

Answer 1

关键是设置位置顶部和左侧的50％，然后变换X和变换为-50％。

 .inner { position: absolute; top: 50%; left: 50%; } .rotate { transform: translateX(-50%) translateY(-50%) rotate(-90deg); } 

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

Answer 2

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

你可以添加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; } 

Answer 4

“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的显示器的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/

Answer 5

正在移除： margin-top: -7px; 来自.inner使垂直旋转的文本为我居中。 这也使横向文本不居中。

只要删除上面的代码？

Answer 6

你可以添加这个：

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

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