Vertically center buttons on image overlay

Question

I am trying to add buttons on image overlay in WooCommerce product page, so everything works fine on desktop mode, but it's not responsible cause main image size is with percent, so I want to make it responsible,

Check screenshot how it looks on mobile and desktop below:

here are 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: all 500ms ease-out;
                    -moz-transition: all 500ms ease-out;
                    -o-transition: all 500ms ease-out;
                    transition: all 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]

Answer 1

If you want to center something whose container's size may change, I suggest doing it with JQuery.

function centerItem(){
    var imgHeight = $(your_image_identifier).height();
    var halfImgHeight = imgHeight/2;
    $(your_button_identifier).css("top", halfImgHeight+"px");
}
window.onload = centerItem;

If you want to align it EXACTLY at the center, you should do it this way:

function centerItem(){
    var imgHeight = $(your_image_identifier).height();
    var halfImgHeight = imgHeight/2-(HALF OF YOUR BUTTON HEIGHT);
    $(your_button_identifier).css("top", halfImgHeight+"px");
}
window.onload = centerItem;

I hope this helps you.

EDIT: Maybe you would also want to bind this function to the onresize event.

$('body').onresize = centerItem;

Answer 2

I always cringe when I see people use javascript for layout. Though it might not have great support, flexbox is almost definitely what you are looking for. Just google it, there are many good tuts online.