How to place div inside another div to absolute position ?

<style type="text/css">

#container{
   width:200px;
   height:200px;
   position:relative;
   border:2px solid #33b5e5;
}
.box{
   border:2px solid #33b5e5;
   position:absolute;
   width:20px;
   height:20px;
   margin: 3px;
}
.top{top:0}
.middle{top:50%;margin-top:-10px;/*half of the .box height*/}
.bottom{bottom:0}

.left{left:0;}
.center{left:50%;margin-left:-10px;/*half of the .box width*/}
.right{right:0;}

</style>

<div id="container" class="box">
    <div class="box top left"></div>
    <div class="box top center"></div>
    <div class="box top right"></div>
 
    <div class="box middle left"></div>
    <div class="box middle center"></div>
    <div class="box middle right"></div>
 
    <div class="box bottom left"></div>
    <div class="box bottom center"></div>
    <div class="box bottom right"></div>
</div>


Output :)