Html 围绕缩略图的问题

我正在创建一个缩略图响应页面，它需要居中。我将元素的大小定义为%。因此，当我试图将容器中的所有内容置于中心位置时，它不起作用，因为左侧元素的左边距也有%的边距。这是我的HTML：

<div class="thumb-container">        
        <div class="clearfix">    
            <a href="" class="thumb-unit"></a>
            <a href="" class="thumb-unit"></a>
            <a href="" class="thumb-unit"></a>
            <a href="" class="thumb-unit"></a>
            <a href="" class="thumb-unit"></a>
            <a href="" class="thumb-unit"></a>
            <a href="" class="thumb-unit"></a>
       </div>                 
</div>

---

你的css样式很混乱。您只需在这里使用两个类即可获得所需的内容。试试下面这个

HTML:

---

检查工作小提琴

您应该尝试为您的

拇指单元

类设置

0 auto

的边距。您还可以删除一些不必要的css来稍微整理一下

 .clearfix {
        overflow: auto;}
    .thumb-container {
        width: 92%;
        margin: 0 auto 0;
        padding-top: 67px;  
        +clearfix;}
    .thumb-unit {
        display: block;
        width: 27%;
        padding-top: 35%;
        margin-left: 5.55556%;

        margin-top: 4.33%;
        float: left;
        position: relative;
        overflow: hidden;}

<div class="thumb-container">        
        <div class="clearfix">    
            <a href="" class="thumb-unit">
              <img src="http://placehold.it/350x150">
            </a>
            <a href="" class="thumb-unit">
              <img src="http://placehold.it/350x150">
            </a>
            <a href="" class="thumb-unit">
              <img src="http://placehold.it/350x150">
            </a>
            <a href="" class="thumb-unit">
              <img src="http://placehold.it/350x150">
            </a>
       </div>                 
</div>

.thumb-container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex; /* add */
        justify-content: center; /* add to align horizontal */
        align-items: center; /* add to align vertical */
    }