div 안에 CSS 스프라이트를 센터링하는 방법은 무엇입니까?

Question

내 홈페이지에 여러 이미지가 결합 된 CSS 스프라이트를 만들었습니다. 그러나 나는 지금 그 심상을 표시하는 문제점이있다.

당신은 이미지 (가게 로고는) 중앙에 표시되지 않는 것을 알 수있다. 그들이 같이

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

패딩을 제거한 후 :

  <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가 여기 내 html 코드입니다

나는 마진을 가진 모든 다른 옵션을 시도했지만 couldnt는 그것을 정말로 만든다.

Answer 1

하는 인 flexbox를 사용해보십시오 : 모든 아이디어를 어떻게 그들과 같이 만들

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

Answer 2

당신의 .sprite CSS의이 시도 :

background-position: center; 

(나는 그것을 here 발견)

Answer 3

내부 요소를 가운데 맞추기 위해 패딩을 사용하지 마십시오. 다른 높이.

상위에 높이주고 채우기 BG 색상을

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

및 변환하여 내부 DIV 위치하므로 어떤 높이 중심 것이다.

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