使用 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很短时，这一点尤其明显。

是否有可能在不事先知道任何大小的情况下将文本垂直居中？我还没有找到解决这个问题的 transform-origin值。

84727 次浏览
小开

Can you add margin: 0 auto; to your "rotate" class to center the text.

.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;
}
小开

Removing : margin-top: -7px; from .inner made the vertically rotated text centered for me. It also made the horizontal text not centered.

Just remove the above code?

小开

You could add this: 

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

To your .on('change') function, as you can see here: http://jsfiddle.net/darkajax/hVhbp/

小开

It may be a bit late for answering that question, but I stumbled on the same issue and found some way of achieving it, by adding another div in the way.

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

and applying a text-align: center on that middle element, along with some positioning stuff:

.middle {
margin-left: -200px;
width: 400px;
text-align: center;
position: relative;
left: 7px;
top: 50%;
line-height: 37px;
}

The .inner also gets a display: inline-block; to enable both rotate and text-align properties.

Here is the corresponding fiddle : http://jsfiddle.net/CCMyf/47/

小开
最佳答案

The key is to set position top and left to 50% and then transformX and transformY to -50%.

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


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

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

小开

The answer from 'bjnsn' is good but not perfect as it fails when the text contains space in it. For example he used 'Centered?' as text but if we changed the text to let suppose 'Centered? or not' then it will not work fine and will take the next line after space. Ther is not width or height defined for the inner div block. 

.inner {
font-size: 13px;
font-color: #878787;
position: absolute;
top: 50%;
left: 50%;
background: #DDD;
}

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ But we can make the whole text centered align properly, by setting the inner div width equal to height of the outer div, line-height of inner div equal to the width of the outer div and setting the display flex property for inner div with align-items:center and justify-content:center properties.

.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');
});

updated fiddle https://jsfiddle.net/touqeer_shakeel/cjL21of5/

小开

The another option to rotate text 90 degree and center on axis Y is:

.rotate-centered {
top: 50%;
right: 50%;
position: absolute;
transform: scale(-1) translate(-50%, 50%);
writing-mode: vertical-lr;
}

<span class="rotate-centered">Text<span>

Example: https://codepen.io/wwwebman/pen/KKwqErL

But because of bad support in IE/EDGE writing-mode does NOT work there: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode


提交答案