how do i vertical align these 2boxs inside this red box? - html

Question

How do i vertical align the white box and green box inside red box. I want it look like in the picture below. Thanks you. guys are the best. here is 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

The red box should be used as a table-cell.
The 2 little boxes should be displayed in inline-block;
Horizontal alignment: text-align: center;
Vertical alignment: vertical-align: middle;
Result: 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);
}