垂直居中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

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

<强> Demo

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

Answer 2

将内部div设置为position:absolute。

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

编辑：如果您打算使用不同的宽度制作更多这些广告，那么这将无效，但如果我只是将margin-left: -72px;添加到.inner类它对齐.outer div内部的左侧。

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