如何将 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

在你的 .sprite 中试试这个 css:

background-position: center;

(我找到了here)

Answer 2

尝试使用 flexbox：

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

Answer 3

不要使用内边距来使不同高度的内部元素居中。

给父级高度并填充背景颜色

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

并使用变换定位内部 div，因此它将以任何高度居中。

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

如何将 css 精灵置于 div 的中心？

how to center a css sprite inside a div?

html

css

css-sprites