动态调整中心divs在另一个div内动态变化的高度

Question

我无法找到解决方案，我的问题，所以我问你的帮助...我有1个div根据浏览器窗口高度改变其高度。这个div里面有5个div，每行4个，当我把窗口大小调整为更小的div时，会在2,3行上掉下来。这很好，但是这些div并不在调整大小的主div的中间而这正是我要找...谢谢您

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

而不是float:left; for .mosaic-block，您可能需要尝试display:inline-block;并将text-align:center;添加到main。这有点脏，但它的工作原理！

PS。你可能想删除那个max width: 840px;，我怀疑这是一个有效的声明！

Answer 2

添加在你的CSS #Main

overflow:auto;