title: Maintain element centered vertically and horizontally of a image in any width device
body: <p>I have an image div with a element inside that i want to be positionated on center (vertical and horizontal) when user hover the box. I can do it (the hover effect and appear the icon hover the image), but i can't centered the icon (a plus icon), in the center of the image, vertically and horizontally. I tried to use percents and position absolute but it's not a solution because i need to insert a lot of sentences in each media queries to establish a new top and left position depending the resolution. How can i do it "automatic"? I see topics related in stackoverflow but it's not like my problem, because my image is an element block, not a background, so i can't do background-center. I Made a JSFiddle, look the icon plus, i want to be centered in the image in any width device: <a href="http://jsfiddle.net/nj44cv5q/1/" rel="nofollow">http://jsfiddle.net/nj44cv5q/1/</a></p>
  
  <p>HTML CODE:</p>
  
  <pre><code>&lt;div class="col-md-6 col-lg-6 col-xs-12 -col-sm-12 box-news"&gt;   
      &lt;div class="col-md-6 col-lg-6 col-xs-12 -col-sm-12"&gt;
              &lt;p class="fecha-noticia-multi hidden-md hidden-lg"&gt;
              &lt;img src="images/calendar-white.png"  class="img-responsive" alt="Responsive image 10" /&gt;
              2 de Febrero de 2015
              &lt;/p&gt;
           &lt;a href="#" class="darken"&gt;
              &lt;img src="http://lorempixel.com/output/nature-q-c-260-193-10.jpg" class="img-responsive b1" alt="B1 image"&gt;
                    &lt;div class="overlay"&gt;
                              &lt;div class="more"&gt;
                                  &lt;span class="glyphicon glyphicon-plus-sign plus-box" aria-hidden="true"&gt;
                                  &lt;/span&gt;
                              &lt;/div&gt;
                    &lt;/div&gt;
          &lt;/a&gt;
      &lt;/div&gt;
                  &lt;div class="col-md-6 col-lg-6 col-xs-12 -col-sm-12"&gt;
                      &lt;div class="noticia-info"&gt;
                          &lt;h2&gt;Iberdrola vende por 192 millones las brasileñas Coelba y Cosern.&lt;/h2&gt;
                      &lt;div&gt;&lt;p  class="desc2"&gt;La operación reporta plusvalías de 69 millones a la eléctrica, que ha cumplido ya el 95% de su plan de desinversiones.&lt;/p&gt;
                                      &lt;p class="fecha-noticia-multi hidden-xs hidden-sm"&gt;&lt;img src="images/calendar-white.png"  class="img-responsive" alt="Responsive image 10" /&gt;2 de Febrero de 2015&lt;/p&gt;
                      &lt;/div&gt;
                   &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hidden-xs hidden-sm"&gt;
          &lt;span class="slider-bottom-wide"&gt;&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hidden-md hidden-lg"&gt;
          &lt;span class="slider-bottom-wide-max"&gt;&lt;/span&gt;
          &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS CODE:</p>
  
  <pre><code>.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;
  
  }
  </code></pre>