使用CSS垂直居中父div中的div

Question

我有一个父div，里面有多个我希望垂直居中的div。

<div id="main">
    <div id="picBox">
        <img src="imageurl">
    </div>

    <div id="lines">
        Line 1<br>&nbsp;&nbsp;Line2
    </div>

    <div id="other">
        Right side text
    </div>
</div>

我设置的CSS

#main {
    border: 1px solid #FF0000;
    height: 100px;
    width: 500px;
    vertical-align: middle;
    display: table-cell;
}
#picBox {
    height: 90px;
    width: 75px;
    background-color: #000;
    float: left;
    position: relative;
    margin-right: 3px;
    display: inline-block;
}
#picBox img {
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    display: inline-block;
}
#lines {
    font-size: 20px;
    float: left;
    background-color: #999;
    display: inline-block;
}
#other {
    float: right;
    margin-right: 3px;
    background-color: #6666DD;
    display: inline-block;
}

我似乎无法让主要div中的div垂直居中，除了第一个＆＃39; picBox＆＃39;格。

有没有办法垂直居中其他div？

这是我的jfiddle示例： http://jsfiddle.net/3ffda7ua/2/

Answer 1

做类似的事情：

#main {
    ... //Keep your other rules
    position: relative;
}
#main div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

使用left: whatever处理您的其他定位。

JSFiddle example

Answer 2

为什么不使用flex-box来对齐它，在父级上使用类似这样的类：

.flex-center-center{
    display: flex;
    flex-direction: column;
     justify-content: center;    
    align-items: center;
}