位置图标垂直居中于div

Question

我想把我的放大镜垂直放在我的div的中心。

我该怎么做？

演示：http://jsfiddle.net/6ewn37gt/

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以向span元素添加一个类并应用以下样式：

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>