Overlay a button to an img

My solution consists of a little CSS3 and adding a class in HTML:

<div class="thumbnail-wrapper">
    <img src="imagems/imagem1.png" />
    <button></button>
</div>

And the CSS:

.thumbnail-wrapper {
    display:inline-block;
    position:relative;
}
.thumbnail-wrapper button {
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate3d(-50%, -50%, 0);
    -moz-transform:translate3d(-50%, -50%, 0);
    transform:translate3d(-50%, -50%, 0);
}

Full example: FIDDLE

In this way the button will always be centered in the middle of the image, regardless of its size or the image size below it.

An idea without touching your markup is to use CSS to position the elements. For this purpose we use a CSS class to limit the scope of the applied styles:

Example in JSFiddle

HTML

<div class="btn-wrap">
    <img src="http://img.youtube.com/vi/DXNAljCahPE/0.jpg"><button>Play</button></div>

CSS

.btn-wrap{position:relative;text-align:center;}.btn-wrapbutton{position:absolute;z-index:1;top:50%;left:50%;width:60px;/*larguraparaobotão*/height:30px;/*alturaparaobotão*/padding:0;margin:-15px00-30px;/*margemàesquerdaeaotopometadedamedidadobotão*/border:0none;}

Result

An implementation suggestion, not exactly with button , but also functional:

HTML

<div class="video">
  <a href="#" title="Titulo do video">
      <img src="/img/local-da-imagem" alt="thumbnail"/>
      <span class="play"></span>    
  </a>
</div>

CSS

.video { 
    width: 250px; /*Tamanho da div com o thumbnail */
    height: 150px; 
}   
.video a { 
    text-decoration: none; 
    display:block; 
}
.video a span.play {
    display:block;
    /*Imagem do play que irá aparecer inicialmente*/
    background: url('/img/local-da-imagem-do-play') center center no-repeat; 
    /*Definir valores conforme tamanho da imagem*/
    margin: -120px 10px 0 0; 
    height: 80px;
    position: relative; 
    z-index: 100; 
    opacity: 0.8; 
    filter: alpha(opacity=80); 
}
.video a:hover span.play {
    /*image que irá aparecer quando o mouse estiver em cima da imagem*/
    background:url('/img/local-da-imgem-quando-hover') center center no-repeat;
}

Result

Hoverscore

Example: JSFiddle