Center Div扩展边框

Question

我正在处理图像网格，并且想要创建一个类似于此的效果http://instagram.com/instagram/（边框展开的页面下部的正方形中的图像，这是我迄今为止所获得的效果：

HTML：

<div id="page-title"> </div> 

<div id="wrapper" style="min-height:300px;"> 
    <!--start: Container --> 
    <div class="container" style="margin-left:100px;"> 

     <div style="position: absolute; width:200px; border: 1px solid black; height:200px;"> 
      <div style="position: relative; background:url('/testimages/1354189822.jpg')" class="polaroids"> 
     </div> 

    </div> 

    </div> 

</div> 
</div>​ 

CSS：？

.polaroids { 
     background: #fff; 
     float: left; 
     width: 158px; 
     height:158px; 
     padding: 5px 5px 5px; 
     text-align: center; 
     text-decoration: none; 
     color: #333; 
     -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
     -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
     -webkit-transition: all .2s ease-in-out; 
     border: 4px solid white; 
     background-color: black; 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    margin-left: auto; 
    margin-right: auto; 
    margin:0 auto !important; 
    } 

    .polaroids:hover { 
     -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); 
     -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); 
     z-index: 5; border-top: 10px solid white; 
     border-bottom: 10px solid white; 
     border-left: 8px solid white; 
     border-right: 8px solid white; 
    }​ 

中间DIV似乎并不想中心我要去哪里错了http://jsfiddle.net/b5XDK/

Answer 1

的子元素的水平中心使用margin:0 auto;并取出float:left;

http://jsfiddle.net/roine/b5XDK/10/

Answer 2

删除您.polaroids的float:left

Answer 3

删除此

.polaroids { float:left }