Can I dynamically resize divs based on discrete units and still center?

Question

Here's the problem: I have a website I'm working on, depending on what the user has selected, a different number of 80px high and 200px wide mailboxes will appear and float: left is currently set. These fields are contained in a div, which is basically the entire width of the screen minus 1% of the fields.

So, at the moment they all fill the box and, depending on the size of the screen, occupy a grid of variable height and width. The problem is that if the screen size is a field for placing, say, a width of 700 pixels, then you get 3 boxes in a row and a bloody large supply on the right.

What I would like to do is center the grid of boxes inside the containing block so that the fields are equal left and right. I suspect that this cannot be done, since this means that the containing box must set its size, looking at both the size of the user's window and the size of its children. This would be easy to do with javascript, but I would rather not do it if this is an option. If this is really not possible, I'm just a script and let non-js users see a left-justified set of mailboxes.

Edit: Good. Corresponding markup bit:

<div class="itemcontainer">
<?php
  ... some php code to generate a query and run it
  while ($row = mysql_fetch_array ($result)) {
        echo '<div class="itembox">'.$row['comname'].'<br<i>'.
              $row['sciname'].'</i></div>';
   }
?>      
</div>

And css with borders / colors, etc. removed for clarity:

.itemcontainer {position: relative; width: 98%; From left to right: 1%;} .itembox {float: left; Margin: 5px; height: 80px; width: 200px;}

, , 1% . , itemboxes.., , . , -, , .:-D

Answer 1

float:left auto :

.itembox { margin:5px auto; height:80px; width:200px;}

float - "3--" ( div , "float" "position" ).

"3--", .itembox :

.itemcontainer { text-align:center; ... }
.itembox { display:inline-block; margin:5px; .... } /* a 700px wide viewport should allow for 3 per row */

, : http://msdn.microsoft.com/en-us/library/ms530751%28v=vs.85%29.aspx

'float' on '.itembox' , .

Answer 2

.itemcontainer {
    display: table;
    margin: auto;
}

: (, ), : auto .