居中2x2网格

Question

我想放在一起有一个网格的四个方格在中心的网页。这就是我所拥有的，我认为你将能够看到我想要发生的事情。我在这里错过了什么让定位工作，因为它应该？

http://jsfiddle.net/LKfd4/

HTML

<div id='main-container'> 
<div class='box' id='topleft'></div> 
<div class='box' id='topright'></div> 
<div class='box' id='bottomleft'></div> 
<div class='box' id='bottomright'></div> 

</div> 

CSS

#main-container{ 
    border:1px solid black; 
    width:980px; 
    height:700px; 
    margin:0 auto; 
    position:relative; 
    top:20px; 
} 

.box { 
    width:100px; 
    height:100px; 
    background:gray; 
    border:2px solid #696969; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box; 
} 

#topleft{ 
    position:relative; 
    margin:0 auto; 
    top:50%; 
    left:50%; 
    margin-top:-110px; 
    margin-left:-110px; 
} 
#topright{ 
    position:relative; 
    margin:0 auto; 
    top:50%; 
    left:50%; 
    margin-top:-110px; 
    margin-left:10px; 
} 
#bottomleft{ 
    position:relative; 
    margin:0 auto; 
    top:50%; 
    left:50%; 
    margin-top:10px; 
    margin-left:10px; 
} 
#bottomright{ 
    position:relative; 
    margin:0 auto; 
    top:50%; 
    left:50%; 
    margin-top:10px; 
    margin-left:-110px; 
} 

Answer 1

从#topleft，#topright，#bottomleft，#bottomright删除position: relative;。并且添加position: absolute;至.box。

的jsfiddle：http://jsfiddle.net/G85fM/

udpated的jsfiddle（至于@Neils评论）：http://jsfiddle.net/G85fM/1/