How to center multiple floated divs with fixed size - css

Question

I want the child divs to be always centered within their container, even on resize, and without changing their size.
Problem Example : http://jsfiddle.net/bQMj7/
HTML
<div id='foo'><div id="container" class='group'>
<div class='childs'>one</div>
<div class='childs'>two</div>
<div class='childs'>three</div>
<div class='childs'>four</div>
<div class='childs'>five</div>
</div>
</div>
CSS
#foo {
text-align:center;
}
#container {
background-color:beige;
display:inline-block;
}
.childs {
width:50px;
height:50px;
background-color:blue;
float:left;
margin-right:10px;
}
.group:after {
clear: both;
content: "";
display: table;
}
I used the "inline-block / text-align:center" technique to center the child divs in their main container. When you resize the window, the floated child divs collapse, that's what I want, BUT as they collapse they're not centered anymore within their container.
I want the cloud of these collapsing-on-resize divs, to be always centered.
Do you have any idea?
Edit : Thanks for the reply, that's pretty much what I'm looking for ! My concern however is that:
The reason why I used float left instead of inline-block is that I wanted those child divs to have no space between each others (which they do have as line elements unless I mess up my code indents to have those many childs on the same line code)
I want the collapsing final line to be aligned left just as the other lines, but the whole being centered.
Here's an update with the two issues above : http://jsfiddle.net/bQMj7/6/.

Answer 1

you may use inline-block for all of them and fake a float : center ; wich doesn't exist.
#container{
background-color:beige;
display:inline-block;
}
#foo{
text-align:center;
}
.childs {
width:50px;
height:50px;
background-color:blue;
display:inline-block;
margin:5px;
}
DEMO http://jsfiddle.net/bQMj7/1/

Answer 2

Is this what you are looking for:
http://jsfiddle.net/collabcoders/bQMj7/3/
#container{
background-color:beige;
display:inline-block;
}
#foo{
text-align:center;
}
.childs {
width:50px;
height:50px;
background-color:blue;
display:inline-block;
margin-right:10px;
}
.group:after {
clear: both;
content: "";
display: table;
}
EDIT: If I understand you correctly you want the space gone between blocks but still keep the center. inline-block for some reason put 4px space on the right so simply add margin-right: -4px; to fix:
HERE'S THE NEW FIDDLE: http://jsfiddle.net/collabcoders/bQMj7/10/
and the update to the .child class
.childs {
width:50px;
height:50px;
background-color:blue;
display:inline-block;
margin-right: -4px;
}