在任何宽度设备中保持元素在图像的垂直和水平方向上居中

Question

我有一个图像div，里面有一个元素，当用户将鼠标悬停在盒子上时，我希望将其定位在中心（垂直和水平）上。我可以这样做（悬停效果并显示图标悬停在图像上），但我不能将图标（加号图标）居中放置在图像的中心，垂直和水平。我尝试使用百分比和绝对位置，但它不是解决方案，因为我需要在每个媒体查询中插入大量句子，以根据分辨率建立新的顶部和左侧位置。我怎么能这样做＆＃34;自动＆＃34;？我看到stackoverflow中的相关主题，但它不像我的问题，因为我的图像是一个元素块，而不是背景，所以我不能做背景中心。我做了一个JSFiddle，看看图标加，我希望在任何宽度设备的图像中居：http://jsfiddle.net/nj44cv5q/1/

HTML CODE：

<div class="col-md-6 col-lg-6 col-xs-12 -col-sm-12 box-news">   
    <div class="col-md-6 col-lg-6 col-xs-12 -col-sm-12">
            <p class="fecha-noticia-multi hidden-md hidden-lg">
            <img src="images/calendar-white.png"  class="img-responsive" alt="Responsive image 10" />
            2 de Febrero de 2015
            </p>
         <a href="#" class="darken">
            <img src="http://lorempixel.com/output/nature-q-c-260-193-10.jpg" class="img-responsive b1" alt="B1 image">
                  <div class="overlay">
                            <div class="more">
                                <span class="glyphicon glyphicon-plus-sign plus-box" aria-hidden="true">
                                </span>
                            </div>
                  </div>
        </a>
    </div>
                <div class="col-md-6 col-lg-6 col-xs-12 -col-sm-12">
                    <div class="noticia-info">
                        <h2>Iberdrola vende por 192 millones las brasileñas Coelba y Cosern.</h2>
                    <div><p  class="desc2">La operación reporta plusvalías de 69 millones a la eléctrica, que ha cumplido ya el 95% de su plan de desinversiones.</p>
                                    <p class="fecha-noticia-multi hidden-xs hidden-sm"><img src="images/calendar-white.png"  class="img-responsive" alt="Responsive image 10" />2 de Febrero de 2015</p>
                    </div>
                 </div>

        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hidden-xs hidden-sm">
        <span class="slider-bottom-wide"></span>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hidden-md hidden-lg">
        <span class="slider-bottom-wide-max"></span>
        </div>
 </div>

CSS代码：

.box-news:hover img.b1 {
 opacity: 0.7;
}
.box-news div.overlay {
    position:relative;
    top:10em;
    left: 44%;
    vertical-align:middle;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.box-news:hover {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.box-news:hover .overlay {
    opacity:1;
     top: -8em;
     left: 44%;
}



.darken:hover img {
    opacity: 0.7;
        transition: all 0.3s ease-in-out;
}

a.darken {
    display: block;
    background: black;
    padding: 0;
    overflow:hidden;

}
.box div.overlay {
    position:relative;
    top:10em;
    left: 44%;
    vertical-align:middle;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.box:hover {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.darken:hover .overlay {
    opacity:1;
     top: -8em;
     left: 44%;
}

.plus-box {
    color: #fff;
    font-size: 2.5em;
    position: absolute;

}