Dynamically align on center divs inside another div with dynamically changing height

Question

I cant find solution to my problem, so I am asking you for help... I have 1 div which is changing its height depending on browser window height. Inside of this div is 5 another divs 4 per line, when I resize window size to smaller size divs fall down on line 2, 3, etc. That´s good, but these divs arent in the middle of the main div which is resized and that is what I looking for... Thank you

HTML:

<div id="main">

<!--Div1-->
<div class="mosaic-block fade">
</div>

<!--Div2-->
<div class="mosaic-block fade">
</div>

<!--Div3-->
<div class="mosaic-block fade">
</div>

<!--Div4-->
<div class="mosaic-block fade">
</div>

<!--Div5-->
<div class="mosaic-block fade">
</div>

</div> <!--main-->

CSS:

div#main {
border: #CCCCCC thin solid;
max width: 840px;
height:600px;
min-width: 210px;
border: #CCCCCC thin solid;
margin:0 auto;
max-width: 840px;
}

.mosaic-block {
margin-bottom:50px;
position: relative;
float:left;
margin:4px;
top:50px;

overflow:hidden;
width:200px;
height:200px;
background:#111 url(../img/progress.gif) no-repeat center center;
border:1px solid #fff;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
}

Answer 1

Instead of float:left; for .mosaic-block, you might want to try display:inline-block; and adding text-align:center; to your main. It's a bit dirty, but it works !

PS. you might want to remove that max width: 840px; , I doubt it's a valid declaration !