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 }