Как центрировать кнопки на изображении, используя Bootstrap 4

Question

У меня есть два соседних адаптивных изображения, каждое с кнопкой, которую я бы хотел отцентрировать на изображении. Прямо сейчас кнопки просто сидят под изображениями. Вот мой код

<!--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>

Прикрепленное изображение того, что у меня сейчас есть

Answer 1

Вот ссылка, которую вы можете использовать

https://www.w3schools.com/howto/howto_css_button_on_image.asp

Иначе

Просто добавьте ниже CSS код кнопки

position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);

Вот скрипка

http://jsfiddle.net/L1aknvgs/1/

Answer 2

В bootstrap 4, Вы можете использовать это следующим образом, а в CSS левый и верхний процент зависят от пикселей изображения, ниже я предоставляю ваш код с модификацией.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-lg-2 col-md-6 col-lg-6">
            <div class="view overlay">
                <img class="img-fluid" src="https://dummyimage.com/600x400/000/fff" alt="Card image cap">
                <div class="text center">
                    <a href="https://www.google.com" target="_blank" class="btn btn-secondary button_position" role="button">Lab1 Website</a>
                </div>
            </div>
        </div>
    </div>
</div>

И CSS

.button_position {
  position: absolute;
  left: 30%;
  top: 40%;
}

а вот и скрипка, https://jsfiddle.net/vbsgfo9k/1/

Answer 3

Добавить позицию относительно родителя кнопки. Затем добавьте абсолютную позицию к кнопке.

.btn{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}

Прикрепленный пример: CODEPEN