CSS - Div不集中

Question

所以我正在做一個實踐網站學習HTML和CSS，我不能得到這個div中心。我試過使用margin：0 auto，但它對div沒有任何作用。這裏是代碼的樣子，我想中心的股利是 「工作樣本」：

HTML：

<div id="work-div"> 

    <div class="title black" id="work-title">My Work</div> 

    <div class=""clear></div> 

    <div id="work-sample-div"> 

     <div class="work-sample">  
      <a href="https://www.google.com/" class="work-title">Google.com</a> 
      <div class="clear"></div> 
      <a href="https://www.google.com/"> <img src="images/googlethumbnail.jpg"></img> </a> 
      <p>Duis id pellentesque sapien. Praesent egestas ut eros eget convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sit amet lacinia dui.</p> 
     </div> 

    </div> 

</div> 

CSS：

.black{ 
    color:black; 
} 

body { 
    padding:0; 
    margin:0; 
    width:100%; 
    font-family: Century Gothic, sans-serif; 
} 

.clear{ 
    clear:both; 
} 

.top-margin { 
    margin-top:50px; 
} 

.title { 
    font-size:4em; 
    text-align:center; 
} 

#work-title { 
    padding-top:20px; 
} 

.work-sample { 
    font-size:.8em; 
    border: solid 1px black; 
    width:40%; 
    padding: 20px; 
    margin: 20px; 
    border-radius:20px; 
    float:left; 
    min-width:400px; 
} 

.work-sample img { 
    float:left; 
    margin-top:10px; 
    width:40%; 
    border:1px black solid; 
} 

.work-sample p{ 
    overflow:hidden; 
    padding-left:5px; 
} 

.work-sample a { 
    color:black; 
    text-decoration:none; 
} 

.work-title { 
    font-size:3em; 
} 

#work-div { 
    height:100vh; 
} 

這裏是一個鏈接以下是它目前看起來像的代碼示例：http://codepen.io/anon/pen/bVROOK

Answer 1

嘗試再次使用margin 20px auto，刪除float：left; 您的代碼應該是這個樣子：

.work-sample { 
    font-size:.8em; 
    border: solid 1px black; 
    width:40%; 
    padding: 20px; 
    /* auto left and right */ 
    margin: 20px auto; 
    border-radius:20px; 
    /* this line has to be removed; otherwise margins left/right are useless 
    float:left;*/ 
    min-width:400px; 
} 

Answer 2

只需添加以下CSS-代碼：

#work-sample-div 
{ 
    width: 100%; 
    display: flex; 
    justify-content: center;  
}