垂直中心在div内部旋转div-Verticalcenterarotateddivinsideadiv

Set the inner div to position:absolute too.

将内部div设置为position:absolute。

http://jsfiddle.net/r4vrf7pg/8/

div {
    border: 1px solid red;
}
.outer {
    position: absolute;
    top: 0px;
    height: 300px;
    width: 30px;
}
.inner {
    transform: translateX(-50%) translateY(-50%) rotate(90deg);
    margin-left: 10px;
    position: absolute;
    top: 50%;
    text-align: center;
}

    

        12345678901234567890
    

.inner {
    ...
    transform: translateX(-50%) translateY(-50%) rotate(90deg);
    margin-left: 10px;
}

Demo

There are probably easier ways to accomplish this. Rotating the parent element would eliminate some complexity, I think.

可能有更简单的方法来实现这一目标。我认为,旋转父元素可以消除一些复杂性。

EDIT: So this won't work if you plan on making more of these with different widths but for right now if I just add margin-left: -72px; to the .inner class it aligns to the left of the inside of the .outer div.

编辑:所以如果你打算用不同的宽度制作更多这些,但是现在如果我只是添加margin-left:-72px;到.inner类,它对齐.outer div内部的左边。

.inner {
    transform: translateY(-50%) rotate(90deg);
    position: relative;
    top: 50%;
    margin-left: -72px;
    text-align: center;
    width: auto;
}