how to center a css sprite inside a div?

Question

I created a css sprite to combine several images appearing on 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 couldn't 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;
}