使用 CSS 垂直居中旋转文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15138723/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically center rotated text with CSS
提问by danvk
I have the following HTML:
我有以下 HTML：
<div class="outer">
<div class="inner rotate">Centered?</div>
</div>
div.outeris a narrow vertical strip. div.inneris rotated 90 degrees. I would like the text "Centered?" to appear centered in its container div. I do not know the size of either div in advance.
div.outer是一条狭窄的垂直条带。div.inner旋转了 90 度。我想要文字“居中？” 出现在其容器 div 的中心。我事先不知道任何一个 div 的大小。
This comes close: http://jsfiddle.net/CCMyf/2/. You can see from the jsfiddle that the text is vertically centered before the transform: rotate(-90deg)style is applied, but is somewhat offset after. This is particularly noticeable when div.outeris short.
这很接近：http: //jsfiddle.net/CCMyf/2/。您可以从 jsfiddle 中看到，在transform: rotate(-90deg)应用样式之前，文本垂直居中，但在应用样式之后有些偏移。这在div.outer短时尤为明显。
Is it possible to center this text vertically without knowing any of the sizes in advance? I haven't found any values of transform-originthat solve this problem.
是否可以在事先不知道任何尺寸的情况下垂直居中此文本？我还没有找到transform-origin解决这个问题的任何值。
回答by bjnsn
The key is to set position top and left to 50% and then transformX and transformY to -50%.
关键是将位置 top 和 left 设置为 50%，然后将 transformX 和 transformY 设置为 -50%。
.inner {
position: absolute;
top: 50%;
left: 50%;
}
.rotate {
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}
回答by Pascal M
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 找到了一些实现它的方法。
<div class="outer">
<div class='middle'><span class="inner rotate">Centered?</span></div>
</div>
and applying a text-align: centeron that middle element, along with some positioning stuff:
并text-align: center在该中间元素上应用 a以及一些定位内容：
.middle {
margin-left: -200px;
width: 400px;
text-align: center;
position: relative;
left: 7px;
top: 50%;
line-height: 37px;
}
The .inneralso gets a display: inline-block;to enable both rotateand text-alignproperties.
该.inner还得到一个display: inline-block;同时启用rotate和text-align性能。
Here is the corresponding fiddle : http://jsfiddle.net/CCMyf/47/
这是相应的小提琴：http: //jsfiddle.net/CCMyf/47/
回答by user3809178
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.
'bjnsn' 的答案很好但并不完美，因为当文本中包含空格时它会失败。例如，他使用“居中？” 作为文本，但如果我们更改文本以假设“居中？与否' 那么它将无法正常工作，并将在空格后取下一行。没有为内部 div 块定义宽度或高度。
.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.
https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/但是我们可以使整个文本居中对齐，通过设置内部div宽度等于外部div的高度，内部div的行高等于外部的宽度div 并使用 align-items:center 和 justify-content:center 属性设置内部 div 的显示 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');
});
updated fiddle https://jsfiddle.net/touqeer_shakeel/cjL21of5/
回答by 97ldave
Can you add margin: 0 auto;to your "rotate" class to center the text.
您可以添加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;
}
回答by Michael
Removing : margin-top: -7px;from .innermade the vertically rotated text centered for me. It also made the horizontal text not centered.
删除：margin-top: -7px;从.inner制造中心对我来说，垂直旋转的文本。它还使水平文本不居中。
Just remove the above code?
把上面的代码去掉？
回答by DarkAjax
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/
对于您的.on('change')功能，您可以在这里看到：http: //jsfiddle.net/darkajax/hVhbp/
回答by wwwebman
The another option to rotate text 90 degree and center on axis Y is:
将文本旋转 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>
Example: https://codepen.io/wwwebman/pen/KKwqErL
示例：https: //codepen.io/wwwebman/pen/KKwqErL
But because of bad support in IE/EDGE writing-modedoes NOT work there:
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
但由于 IE/EDGEwriting-mode中的不良支持在那里不起作用：https:
//developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
