Issue to center elements horizontally in a container

Issue to center elements horizontally in a container

I'm struggling to get my 6 circles centered horizontally to the middle of
the page. I tried to put them in a .middle DIV with display: block and
auto margins but no success - looks like they are aligned to the left side
of .middle
http://jsfiddle.net/376wC/
Many thanks for your help
.middle {
width: 980px;
height: 600px;;
display: block;
margin-left: auto;
margin-right: auto;
background: #ccc;
}