center center css on dynamic heights - html

Question

I want to put the play button (first img) centered to the second images. I can do it with position absolute and margin but how can that be dynamic? What if I'm in a loop and the height of the second images is not always the same?
<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

There are two solutions to do this
1) Put that image between paragraph tags and give style to that paragraph "text-align:center;", just like below
<p style="text-align:center"><img src="#url to your image"/></p>
2) Give style to that img tags margin:0px auto , just like below
<img src="#url to your image" style="margin:0px auto;"/>

Answer 2

you will need to add a parent for the images and position the play image absolute and set it top left 50% and set negative margin of half the width of the play image so that it align it vertically and horizontally
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>