center css3 transition image

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プロパティを使用しようとしましたか？これは、要素を中心にするために使用されます。
私がレスポンシブデザインで画像を中心に置くもう一つの方法は、左と右のパディングをパーセントで適用することです。