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

我有一个图像div，里面有一个元素，当用户将鼠标悬停在框上时，我希望该元素位于中心（垂直和水平）。我可以这样做（悬停效果和出现图标悬停图像），但我不能居中图标（加号图标），在图像的中心，垂直和水平。我尝试使用百分比和绝对位置，但这不是一个解决方案，因为我需要在每个媒体查询中插入大量句子，以根据分辨率建立新的顶部和左侧位置。我怎样才能做到“自动”？我在stackoverflow中看到了相关的主题，但这和我的问题不一样，因为我的图像是一个元素块，而不是背景，所以我不能做背景中心。我制作了一个JSFIDLE，查看图标plus，我想在任何宽度的设备中居中显示图像：

HTML代码：

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

---

TL；博士，但是你在这里有一个额外的连字符：

-col-sm-12

在你的

2

第二行。同样在

div

中，noticia info的父项中。谢谢大家，但这并不能解决问题…这就是为什么我没有将此作为您问题的答案发布的原因：）对不起，我更改了所有连字符，但例如，当我在768x宽设备中时，加号图标显示在图像底部。。

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

}