Posizione icona verticalmente al centro nel div

Question

Vorrei posizionare la lente di ingrandimento al centro del mio div verticalmente.

Come posso fare?

Demo: http://jsfiddle.net/6ewn37gt/

span.text-content { 
 
    background: rgba(23, 165, 195, 0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    display: table; 
 
    opacity: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-transition: opacity 500ms; 
 
    -moz-transition: opacity 500ms; 
 
    -o-transition: opacity 500ms; 
 
    transition: opacity 500ms; 
 
} 
 

 
ul li:hover span.text-content { 
 
    opacity: 1; 
 
}

<ul> 
 
    <li> 
 
     <div style="background-image:url('http://placehold.it/500x500');background-position: 0 0;background-repeat: no-repeat;background-size:cover;height:300px;"> 
 
\t <a href="#"></a> 
 
\t <span class="text-content"><span><img src="http://webdesignandsuch.com/posts/jquery-image-rollover/images/mag.png" style="min-width:121px" /></span></span> 
 
</div> 
 
    </li> 
 
</ul>

Answer 1

È possibile aggiungere una classe all'elemento span e applicare il seguente stile:

span.text-content { 
 
    background: rgba(23, 165, 195, 0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    display: table; 
 
    opacity: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-transition: opacity 500ms; 
 
    -moz-transition: opacity 500ms; 
 
    -o-transition: opacity 500ms; 
 
    transition: opacity 500ms; 
 
} 
 
ul li:hover span.text-content { 
 
    opacity: 1; 
 
} 
 
.imgCont { 
 
    display: table-cell;/*set display to table cell*/ 
 
    vertical-align: middle;/*add vertical align middle*/ 
 
    text-align: center;/*add text align to center for horizontal align too*/ 
 
}

<ul> 
 
    <li> 
 
    <div style="background-image:url('http://placehold.it/500x500');background-position: 0 0;background-repeat: no-repeat;background-size:cover;height:300px;"> 
 
     <a href="#"></a> 
 
     <span class="text-content"><span class="imgCont"><img src="http://webdesignandsuch.com/posts/jquery-image-rollover/images/mag.png" style="min-width:121px" /></span></span> 
 
    </div> 
 
    </li> 
 
</ul>