在另一个<div> </div> </div>中垂直居中<div>

Question

我正尝试使用垂直居中的箭头设置看起来像这样的东西：

CSS：

#arrowdiv {
    width:282px;
    height:61px;
    background-image:url('http://i.imgur.com/RV80I.png');
    margin: 0 auto;
}

#optin {
    height:110px;
    width:960px;
    background-color:#FFFFBF;
    border:1px solid black;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
    margin: 0 auto;
} 

#leftdiv {
    width:340px;
    height:108px;
}

HTML：

<div id="optin">
    <div id="leftdiv">
        <div id="arrowdiv"></div>
    </div>
</div>​

http://jsfiddle.net/NzMLd/1/

现在，它只是水平居中，正如你在我的jsFiddle中看到的那样。

Answer 1

使用background-设置：

#arrowdiv {
    width:282px;
    height:61px;
    background-image:url(http://i.imgur.com/RV80I.png);
    background-position: 0 50%;
    background-repeat: no-repeat;
    height: 100%;
    margin: 0 auto;
}

http://jsfiddle.net/userdude/NzMLd/3/

Answer 2

由于你有不同DIV的固定高度，你可以将它添加到你的箭头：

margin-top:23px;

其中23 =（108-61）/ 2

是的，另一种方法是使用此

background-position: 0 50%;
background-repeat: no-repeat;
height: 100%;

Answer 3

有很多方法可以做到这一点......出于某种原因，你的小提琴对我不起作用，但试试这个leftdiv CSS：

#leftdiv {
    width:340px;
    height:108px;
    display: table-cell;
    vertical-align: middle;
}