如何將一個css精靈居中在一個div中？

Question

我創建了一個CSS精靈來組合我的主頁中出現的幾個圖像。不過，我現在有問題顯示這些圖像。

你看到的圖像（商店徽標）不集中顯示。這裏是我的html代碼：

  <div class="slider-slick"> 
       <?php foreach($stores as $store){?> 
        <div class="slide"> 
         <div class="client"> 
          <div class="sprite sprite-<?php echo $store->_storeName?>"></div> 
         </div> 
        </div> 
       <?}?> 
      </div> 

對於精靈的CSS是：

.sprite { 
    background-image: url(../images/spritesheet-logos.png); 
    background-repeat: no-repeat; 
    margin: auto; 
} 

.sprite-store1 { 
    width: 149px; 
    height: 71px; 
    background-position: -5px -5px; 
} 

.sprite-store2 { 
    width: 148px; 
    height: 23px; 
    background-position: -164px -5px; 
} 

和父DIV是：

.client { 
    padding: 70% 0 0; 
    background: #ffffff; 
} 

移除填充後，他們看起來像：

我一直在嘗試所有不同的邊緣選項，但無法真正做到這一點。任何想法如何使它們看起來像這樣：

Answer 1

使用Flexbox的嘗試：

.client { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

Answer 2

試試這個在您的.sprite CSS：

background-position: center; 

（我發現它here）

Answer 3

不要使用填充來居中內部元素與不同的高度。

給高度與母體和填充背景顏色

.client { 
    padding: 0; 
    background: #ffffff; 
    height: 71px; 
} 

，並使用變換內DIV位置，所以這將是中心具有任何高度。

.client > div { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}