Center content over a image - html

Question

I am trying to center a little self made caption over a image, but its not quite working right. I'm not sure what I'm doing wrong, but here is a fiddle that shows what i am working with: https://jsfiddle.net/efvL28o0/.
html
<div class= "container-fluid">
<div class="row">
<div class="col-md-3">
<a href="" class="rel-tile" >
<img src="http://via.placeholder.com/1000x500" width="100%">
<span class="btn-center text-center caption-custom">About Me</span>
</a>
</div>
<div class="col-md-3">
<a href="" class="rel-tile">
<img src="http://via.placeholder.com/1000x500" alt="" width="100%">
<span class="btn-center text-center">Lineage</span>
</a>
</div>
<div class="col-md-3">
<a href="" class="rel-tile">
<img src="http://via.placeholder.com/1000x500" alt="" width="100%">
<span class="btn-center text-center">Contact Me</span>
</a>
</div>
<div class="col-md-3">
<a href="" class="rel-tile">
<img src="http://via.placeholder.com/1000x500" alt="" width="100%">
<span class="btn-center text-center">Gallery</span>
</a>
</div>
</div>
</div>
css
.rel-tile {
position: relative;
}
.btn-center {
position: absolute;
top: 45%;
opacity: 0.6;
left:45%;
background-color: black;
color: white;
text-decoration: none;
}
Ideally it would float exactly in the middle regardless of the size i set for the btn-center.
Thank you!

Answer 1

https://jsfiddle.net/bsalex/byqa4qng/3/
Change .btn-center styles to:
.btn-center {
position: absolute;
top: 50%;
opacity: 0.6;
left:50%;
background-color: black;
color: white;
text-decoration: none;
transform: translate(-50%, -50%);
}
The main part here is transform: translate(-50%, -50%);.
It is one of the common centering techniques.