html - 垂直居中 div 内的旋转 div

Question

我不明白;-(

我想将一个 div 与另一个 div 中包含的文本居中。内部 div 旋转了 90 度。到目前为止，一切都很好。我的问题是我无法让内部 div 与外部 div 的左侧水平对齐。如何做到这一点？

Here is the fiddle

HTML:

<div class="outer">
    <div class="inner">
        12345678901234567890
    </div>
</div>

CSS:

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: relative;
    top: 50%;
    text-align: center;
}

Answer 1

也将内部 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;
}

<div class="outer">
    <div class="inner">
        12345678901234567890
    </div>
</div>