如何在这个红色框内垂直对齐这些2盒？

Question

如何将红色框内的白色框和绿色框垂直对齐。我希望它看起来如下图所示。谢谢。伙计们是最好的。这是http://jsfiddle.net/hamdlink/JxDn5/

<style>
    *{
        padding:0;
        margin:0;
    }
    .box{
        width:600px;
        height:600px;
        position: absolute;
        margin:auto;
        left:0;
        right:0;
        bottom:0;
        top:0;
        background: red;
    }

    .box2{
        margin:0 auto;
        background: green;
        width:100px;
        height:100px;
    }

    .box3{
        margin:0 auto;
        background: white;
        width:100px;
        height:100px;
    }
    .whole-background{
        position: absolute;
        width:100%;
        height:100%;
        background: rgba(0,0,0,.5);
    }
</style>
    <div class="whole-background"></div>

    <div class="box">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>  

Answer 1

红色框应该用作 table-cell 。 2个小方框应显示在内嵌块;

中

水平对齐：text-align：center; 垂直对齐：垂直对齐：中间;

结果：http://jsfiddle.net/JxDn5/2/

*{
    padding:0;
    margin:0;
}
.box{
    width:100px;
    height:600px;
    margin:auto;
    background: red;
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 0 250px;
}

.box2{
    margin:0 auto;
    background: green;
    width:100px;
    height:100px;
display: inline-block;
vertical-align: middle;
}

.box3{
    margin:0 auto;
    background: white;
    width:100px;
    height:100px;
display: inline-block;
vertical-align: middle;
}
.whole-background{
    position: absolute;
    width:100%;
    height:100%;
    background: rgba(0,0,0,.5);
}