居中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/