Position icon vertically centered in div

Question

I would like to position my magnifying glass in the center of my div vertically.

How to do it?

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;"> <a href="#"></a> <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

You can add a class to the span element and apply the following style:

 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>