用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价值。

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

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

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

    回答这个问题可能有点晚了,但我偶然发现了同样的问题,并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; 以启用rotatetext-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的显示器的flex属性与align-items:center和justify-content:center属性&#x3002;

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

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

    只要删除上面的代码?

    你可以添加这个:

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

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