Html 图像叠加上的垂直居中按钮

我正在尝试在WooCommerce产品页面的图像覆盖上添加按钮， 所以在桌面模式下一切正常，但这不负责任，因为主图像大小为%，所以我想让它负责任

查看下面的屏幕截图，它在手机和桌面上的外观：

这里是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;}

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

![在此处输入图像描述][1]

如果您想将容器大小可能发生变化的内容放在中心位置，我建议使用JQuery

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

如果要将其精确对齐在中心，应按以下方式进行：

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;

我希望这对你有帮助

编辑：可能您还希望将此函数绑定到onresize事件

---

$（'body'）。onresize=centerItem
当我看到人们使用javascript进行布局时，我总是畏缩。虽然它可能没有很好的支持，但flexbox几乎肯定是您想要的。只要用谷歌搜索一下，网上就有很多不错的图坦卡门。
在问题中指定该按钮的类别或id