html - Vertically center buttons on image overlay -

i trying add buttons on image overlay in woocommerce product page, works fine on desktop mode, it's not responsible cause main image size percent, want make responsible,

check screenshot how looks on mobile , desktop below:

here css

.media {   display: inline-block;   position: relative;   vertical-align: top;   width: 100%;   height: auto; }  .media__image { display: block; }  .media__body {   background: #000;   bottom: 0;   color: white;   font-size: 1em;   left: 0;   opacity: 0;   overflow: hidden;    position: absolute;   text-align: center;   top: 0;   right: 0;   -webkit-transition: 0.6s;   transition: 0.6s; }    .media__body:hover { opacity: 0.7; }   .media_bodyline {                       width:0%;                      margin:15px auto;                      background-color:#ffffff;                     -webkit-transition: 500ms ease-out;                     -moz-transition: 500ms ease-out;                     -o-transition: 500ms ease-out;                     transition: 500ms ease-out;       } .media__body:hover .media_bodyline {                      width:60%;  }   .media__body:hover:after, .media__body:hover:before {   -webkit-transform: scale(1);   -ms-transform: scale(1);   transform: scale(1);   opacity: 1; } .buyicon { height:42px!important;  width:42px!important;  display: inline!important;  } .media__body div { padding-bottom: 10px !important;  }  .media__body p { margin-bottom: 1.5em; } .media__mid { width: 100%; height: 50%; top: 30%; margin: 0px auto; position: relative;} 

and html

<div class="media"><a href="<?php the_permalink(); ?>">              <?php                 /**                  * woocommerce_before_shop_loop_item_title hook                  *                  * @hooked woocommerce_show_product_loop_sale_flash - 10                  * @hooked woocommerce_template_loop_product_thumbnail - 10                  */                 do_action( 'woocommerce_before_shop_loop_item_title' );             ?>          </a>   <div class="media__body">   <div class="media__mid">     <div><a  href="<?php the_permalink(); ?>"><img class="buyicon" src="/wp-content/uploads/2015/06/link-details.png" ></a></div>     <hr class="media_bodyline"></hr>     <div><?php do_action( 'woocommerce_after_shop_loop_item' ); ?></div>     </div> </div> </div>![enter image description here][1] 

if want center container's size may change, suggest doing jquery.

function centeritem(){     var imgheight = $(your_image_identifier).height();     var halfimgheight = imgheight/2;     $(your_button_identifier).css("top", halfimgheight+"px"); } window.onload = centeritem; 

if want align @ center, should way:

function centeritem(){     var imgheight = $(your_image_identifier).height();     var halfimgheight = imgheight/2-(half of button height);     $(your_button_identifier).css("top", halfimgheight+"px"); } window.onload = centeritem; 

i hope helps you.

edit: maybe want bind function onresize event.

$('body').onresize = centeritem;