how to center a css sprite inside a div? - html

Question

I created a css sprite to combine several images appeared in my homepage. However I now have issues displaying those images.
You see that the images (store logos) are not displayed centrally. Here is my html code:
<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>
The css for the sprite is:
.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;
}
and the parent div is:
.client {
padding: 70% 0 0;
background: #ffffff;
}
After removing the padding they look like:
I ve been trying all different options with margin but couldnt really make it. Any ideas how to make them look like this:

Answer 1

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

Answer 2

Don't use padding to center the inner elements with different height.
Give height to the parent and fill the bg color
.client {
padding: 0;
background: #ffffff;
height: 71px;
}
and position the inner div using transform, so it will be center with any height.
.client > div {
position: relative;
top: 50%;
transform: translateY(-50%);
}

Answer 3

Try this in your .sprite css:
background-position: center;
(I found it here)