How to center buttons in image using Bootstrap 4

I have two adjacent responsive images, each with a button that I would like to be centered in the image. Right now the buttons are just sitting below the images. Here is my code

<!--LAB1-->
<div class="row">
<div class="col-lg-2 col-md-6 col-lg-6">
<div class="view overlay">
<img class="img-fluid" src="img/lab1.jpeg" alt="Card image cap">
<div class="text center">
<a  href="https://www.google.com" target="_blank" class="btn btn-secondary" role="button">Lab1 Website
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
</div>

<div style="height: 10px"></div>

<!--LAB2-->
<div class="col-lg-2 col-md-6 col-lg-6"<div class="view overlay">
<img class="img-fluid" src="img/lab2.jpg" alt="Card image cap">
<a href="https://www.google.com" target="_blank" class="btn btn-secondary" role="button">Lab2 Website
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
</div>

attached an image of what I currently have