動態高度上的中心css

Question

我想將播放按鈕（第一個img）居中放置在第二個圖像上。我可以用絕對位置和邊緣位置來做到這一點，但這怎麼可能是動態的？如果我在一個循環中，第二個圖像的高度並不總是一樣的話呢？

<img src="http://maxcdn.clubcooee.com/img/icons/play-button2.png"/> 
<img src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg"/> 

Answer 1

有兩個解決方案做到這一點

1）把段落標記之間的圖像，並給予風格的那款「文本對齊：中心;」，就像下面

<p style="text-align:center"><img src="#url to your image"/></p>

2）給出的風格到IMG標籤保證金：0px auto的，就像下面

<img src="#url to your image" style="margin:0px auto;"/>

Answer 2

你將需要添加父的圖像和遊戲圖像定位絕對和設置左上50％，並創下負利潤率表演圖像，這樣的寬度，它的一半垂直對齊和水平

div { 
 
    margin: 30px; 
 
    position: relative; 
 
    border: 1px solid red; 
 
} 
 
img.main { 
 
    width: 100%; 
 
    height: auto; 
 
    vertical-align: middle; 
 
} 
 
img.play { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin: -63px 0 0 -63px; 
 
} 
 
.second .main { 
 
    height: 400px; 
 
}

<p>with smaller height</p> 
 

 
<div> 
 
    <img class="play" src="http://maxcdn.clubcooee.com/img/icons/play-button2.png" /> 
 
    <img class="main" src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg" /> 
 
</div> 
 

 
<p>with larger height</p> 
 

 
<div class="second"> 
 
    <img class="play" src="http://maxcdn.clubcooee.com/img/icons/play-button2.png" /> 
 
    <img class="main" src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg" /> 
 
</div>