如何将一个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%); 
}