Is there a way to vertically align the white and green boxes inside the red box? I'm aiming for a layout similar to the one shown in the image below. Your help is greatly appreciated! Check out this demo on jsfiddle.
<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>