Center button between two images, vertically in percent - html

Question

I'm trying to achieve this behavior:
images are img-fluid, cause they need to scale across Bootstrap breakpoints
the layout must always be like the mockup, both when images are small or large (button doesnt need to scale)
Since elements can't span across divs, I tried putting the button in the first column and setting it to position: absolute + many variants of props, but no way I could get the result I need.
I don't need to use 2 cols at any cost, as long as it is all inside a row, i can do anything, this is just my attemp
Some attempts:
Starting point without button:
<div class="row py-3">
<div class="col">
<img src="https://fakeimg.pl/693x678" class="img-fluid">
</div>
<div class="col">
<img src="https://fakeimg.pl/693x678" class="img-fluid">
</div>
</div>
Attempt 1:
<div class="row py-3">
<div style="position: absolute" class="text-center h-auto" style="position: absolute; left: 0; right: 0;">
<a class="btn btn-success text-white px-5">Hi guys</a>
</div>
<div class="col">
<div class="w-100">
<img src="https://fakeimg.pl/693x678" class="img-fluid mr-3">
<img src="https://fakeimg.pl/693x678" class="img-fluid ml-3">
</div>
</div>
</div>
Attempt 2:
<div class="row py-3">
<div class="col">
<a class="btn btn-success text-white px-5" style="position: absolute; left: 0; right: 0;">Hi guys</a>
<img src="https://fakeimg.pl/693x678" class="img-fluid">
</div>
<div class="col">
<img src="https://fakeimg.pl/693x678" class="img-fluid">
</div>
</div>
And many others ...

Answer 1

Something like this
.row {
position: relative;
}
a {
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col">
<img src="https://fakeimg.pl/693x678" class="img-fluid">
</div>
<div class="col">
<img src="https://fakeimg.pl/693x678" class="img-fluid">
</div>
<a class="btn btn-success text-white px-5">Hi guys</a>
</div>

Answer 2

HTML:
<div class="row some-row">
<div class="col">...</div>
<div class="col">...</div>
<a class="btn some-btn"></a>
</div>
CSS:
.some-row {
position: relative;
}
.some-btn {
position: absolute;
bottom: 30px;
margin: 0 auto;
}

Answer 3

This solution makes the assumption that your button is placed inside the first column as per your own attempt. In this case, all you need for the button to be placed in the middle of the two columns is to use parentWidth - 0.5 * buttonWidth. A combination of left and transform achieves that:
Example:
document.querySelector(".btn").addEventListener("click", function () {
[].forEach.call(document.querySelectorAll("img"), function (img) {
img.src = "https://placehold.it/693x500";
});
});
body {
overflow-x: hidden;
}
.btn {
position: absolute;
left: 100%;
transform: translateX(-50%);
z-index: 2;
bottom: 15%;
}
<link type = "text/css" rel = "stylesheet" href = "https://cutt.ly/Twe8un2"/>
<div class = "row">
<div class = "col">
<img src = "https://placehold.it/693x300" class = "img-fluid">
<a class = "btn btn-danger text-white">Custom Button</a>
</div>
<div class = "col">
<img src = "https://placehold.it/693x300" class = "img-fluid">
</div>
</div>

Answer 4

Here is a pen i did using a grid layout to replicate your mockup.
I used Grid because they make it easy to superpose elements and to organise a 2d layout.
.grid-container {
display: grid;
grid-template-rows : min-content 150px 20%;
grid-template-columns : 45% 5% 5% 45%;
justify-items: center;
align-items: center;
width: max-content;
height: max-content;
}
The images only need one row but to position the button as desired I made 3. The 150px one being for the button. For the images i just need to span them accross the 3 rows.
For the column, as i need the button to be centered above the images, i made 4 of them. Each image span the 2 outside columns respectively and the button the 2 'inside' columns.
.img1 {
grid-row: 1/4;
grid-column: 1/3;
}
.img2 {
grid-row: 1/4;
grid-column: 3/5;
}
.button1 {
grid-row: 2/3;
grid-column: 2/4;
}
Obviously you can adjust the pourcentages and sizes to fit your need more precisly.
Note : The row you were talking about would be the grid container in this example.