Center images in a div with equal horizontal and vertical spacing

I have a div containing 10 images, each with its own div:

<div id="TankDialog" title="Choose Tank" style="display:none">
      <div class="ImageBox"><img src="images/tanks/tank1.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank2.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank3.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank4.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank5.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank6.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank7.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank8.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank9.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank10.png" style="width:150px" /></div>
</div>

These images are not uniform in size but I am forcing them all to 150px. But I want to lay out the images in a grid-like fashion so that they're each inside an invisible box that takes the same amount of horizontal and vertical space. And I want each image centered inside its invisible box. The divs around the images are just to aid with positioning/placement--if they're not necessary to achieve this layout, that's fine. The problem is that each image gets positioned at the top left of its div, rather than in the center. Here is the ImageBox class:

.ImageBox{
    float:left;
    width:177px;
    height:177px;
    display:block;
    margin: 0 auto;
}

Notice in the screenshot below how the image aligns in the top-left rather than the center. How can I fix this?