center css3 전환 이미지

Question

나는 css3 전환을 사용하여 넘겨주는 이미지를 만들었습니다. 내가 전이에서 추가하기 전에 이전처럼 이미지를 중앙에 배치 할 수없는 것 같습니다. HTML은 다음과 같습니다

.flip-container { 
 
    cursor: pointer; 
 
    height: 200px; 
 
    perspective: 900; 
 
    position: relative; 
 
    width: 300px; 
 
} 
 

 
.flip { 
 
    height: 100%; 
 
    position: absolute; 
 
    transform-style: preserve-3d; 
 
    transition: all 1s ease-in-out; 
 
    width: 100%; 
 
} 
 

 
.flip:hover { 
 
    transform: rotateY(180deg); 
 
} 
 

 
.flip .side { 
 
    backface-visibility: hidden; 
 
    border-radius: 40px; 
 
    height: 100%; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    width: 100%; 
 

 
} 
 

 
.flip .back { 
 
    background: orange; 
 
    color: #f5f5dc; 
 
    line-height: 150px; 
 
    text-align: center; 
 
    font-size: 350%; 
 
    transform: rotateY(180deg); 
 
}

<div class="flip-container"> 
 
    <div class="flip"> 
 
    <div class="side"><img src="image is linked here" alt="Yum"></div> 
 
    <div class="side back">Yum</div> 
 
    </div> 
 
</div>

전체 오브젝트 센터를 만드는 방법에 (플립과 마우스를하지 않은 상태) 어떤 조언은 매우 감사합니다!

Answer 1

img 태그에 margin:auto 속성을 사용해 보았습니까? 요소를 가운데에 맞출 때 사용됩니다.
응답 디자인의 이미지를 가운데에 배치하는 데 사용하는 또 다른 방법은 왼쪽과 오른쪽의 비율을 백분율로 적용하는 것입니다.