Centering an icon or button inside a responsive card image - html

Question

I have this card which i am displaying in a page. I want the button or an icon to appear at the middle of the page and should be also be responsive not to stay at the same spot when the window is resized. This is the code so far
<div class="col-md-3 search_result">
<div class="col text-center">
<button>
Play Icon
</button>
</div>
<div class="card cw">
<img class="card-img-top" src="https://picsum.photos/534/313" alt="Card image cap">
<div class="card-footer"><span class=""></span> <a class="sr_fl" href="">Image of the pillar</a><br/>
<span class="badge badge-red">Source:</span>Pillar.com
</div>
</div>
</div>
This is the result https://jsfiddle.net/s8b0djc1/1/
How can i center the button or any element at the center of the card image?

Answer 1

I'm not sure what you wanted and I don't have the information on the classes you use (even if I think it's boostrap). Here is a code that could enlighten you on how to do it.
.card {
position: relative;
width: max-content;
}
.card button {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transforme: translate(-50%, -50%);
}
<div class="col-md-3 search_result">
<div class="card cw">
<button></button>
<img class="card-img-top" src="https://picsum.photos/534/313" alt="Card image cap">
<aside class="card-footer"><span class=""></span> <a class="sr_fl" href="">Image of the pillar</a><br />
<span class="badge badge-red">Source:</span>Pillar.com
</aside>
</div>
</div>