如何使旋转 90 度的 div 的内容居中 [重复]答案

【问题标题】：How to center the content of a 90-deg-rotated div [duplicate]如何使旋转 90 度的 div 的内容居中 [重复]
【发布时间】：2016-01-04 18:12:41
【问题描述】：

有一个页面列出了具有不同状态的产品条目。我希望能够为每个产品使用小色带，这将表明产品的当前状态。

带有功能区的此类列表示例位于此处：http://jsfiddle.net/19ren646/

HTML：

<div class="list-group-item">
    <h4>Short item</h4>
    <p>I don't have that much content really</p>

    <div class="ribbon">
        <span>Ribbon</span>
    </div>
</div>
<div class="list-group-item">
    <h4>A much longer item</h4>
    <p>I have a lot of content, because I have a Lorem ipsum in me</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos amet, minus maiores adipisci. Neque possimus, iusto odio explicabo. Libero, fugiat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, aliquid.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos amet, minus maiores adipisci. Neque possimus, iusto odio explicabo. Libero, fugiat.</p>

    <div class="ribbon">
        <span>Ribbon</span>
    </div>
</div>

CSS：

.list-group-item {
    position:relative;
    padding:20px;
    padding-left:60px;
    border:1px solid #ccc;
}
.ribbon {
    position:absolute;
    top:0;
    left:0;
    width:40px;
    height:100%;
    background:blue;
    color:white;
}
.ribbon span {
    display:block;
    transform:rotate(90deg);
}

为了节省水平空间，色带旋转了 90 度。但我的问题是，我可以将功能区的文本垂直放在中间吗？

我知道我可以通过用户position:relative 或margins 将文本向下推，但这只有在所有条目的高度都保持不变的情况下才能正常工作，而事实并非如此。那么我可以将文本推到中间，以适用于.list-group-item 元素的任何高度的方式吗？

【问题讨论】：

标签： css

【解决方案1】：

可以在css中使用绝对定位+翻译功能：

http://jsfiddle.net/19ren646/1/

.ribbon span {
    position: absolute;
    top:50%;
    display:block;
    transform:rotate(90deg) translate(-50%);
}

编辑

为了兼容 safari，也可以使用 webkit 前缀定义

.ribbon span {
    position: absolute;
    top:50%;
    display:block;
    -webkit-transform: rotate(90deg) translate(-50%);
    transform: rotate(90deg) translate(-50%);
}

【讨论】：

【解决方案2】：

试试这个：

.ribbon span {
    display:block;
    position: relative;
    top:50%;
    transform:rotate(90deg) translateX(-50%);
    text-align:center;
}

fiddle

这在定位上应该是相当准确的_

【讨论】：

【解决方案3】：

你可以通过这个来实现。

.ribbon span {
    display:block;
    transform:rotate(90deg);
    top: calc(50% - 1.5em);
    position: relative;
}

你也可以这样做以获得更好的外观

.ribbon span {
    display:block;
    top:20%;
    left:0.6em;
    position: relative;
    -ms-writing-mode: tb-rl; /* old syntax. IE */
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl; /* new syntax */
    -webkit-text-orientation: upright;
    -moz-text-orientation: upright;
    -ms-text-orientation: upright;
    text-orientation: upright;
}

这是最后一个的工作演示

Demo code you can Try like this

【讨论】：

@ImNotMike 请看我的回答