центр 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

Вы пытались использовать свойство margin:auto на ярлыке img? Он используется для центрирования элементов.
Другая вещь, которую я использую для центрирования изображений в отзывчивом дизайне, - это добавление прописью слева и справа в процентах.