Problem with flex-box vertical align middle (align-items: center) - css

Question

I'd like the navigation arrows to align vertically middle.
On the live site they are off-center.
There is compromising CSS I can't change which sets a top: 40% for the arrows (.owl-nav button).
I've tried unseting their top, but this pushes them to underneath the image.
I've tried setting top: calc(50% - 37.5px); (minus half the button's height of 75px) but this is off-center. Is my math right here?
I've been able to get it working below by using a fixed height for .owl-nav.pp-carousel-nav but on the live page the .owl-items are not of fixed width and height, they are responsive.
.owl-carousel .owl-stage {
position: relative;
}
.pp-content-post-carousel {
position: relative;
}
.landscape-carousel-container {
width: 100%;
}
.landscape-carousel-content {
width: 100%;
}
.landscape-carousel-overlay {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 236px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
opacity: 0;
transition: .4s ease !important;
border-radius: 15px;
background-color: #22a1d9;
}
.landscape-carousel-img {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 236px;
margin-bottom: 10px;
padding-bottom: 0px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-color: rgba(14,34,129,0);
background-image: url("https://cdn-ehbod.nitrocdn.com/MnwLQZiWrxfKgQoPapfeSJHycGHMrPjW/assets/static/optimized/rev-315e7f6/img/background-image.svg");
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
cursor: pointer;
border-radius: 15px;
border: 3px solid #dfefef;
}
.owl-nav.pp-carousel-nav {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 242px;
width: 370px;
position: absolute;
top: 10px;
}
.owl-nav button {
position: absolute;
line-height: 1;
margin: 0;
font-size: 20px;
background: none !important;
z-index: 1;
border: none;
background-color: transparent;
}
.owl-nav button.owl-prev {
left: -15px;
}
.owl-nav button.owl-next {
right: -15px;
}
.owl-nav button svg {
width: 51px;
height: 51px;
color: white;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.sr-only {display: none;}
<div class="owl-item cloned" style="width: 370px;">
<div class="pp-content-post pp-content-carousel-post pp-grid-custom post-6474 templates type-templates status-publish hentry templatecategory-hospitality templatecategory-landscape-liquor-hospitality-2 templatecategory-liquor" itemscope="" itemtype="https://schema.org/CreativeWork" data-id="6474" style="visibility: visible; height: 269.2px;">
<div class="landscape-carousel-container">
<div class="landscape-carousel-content">
<div class="landscape-carousel-overlay">
Edit this Template </div>
<div style="background-image: url("https://cdn-ehbod.nitrocdn.com/MnwLQZiWrxfKgQoPapfeSJHycGHMrPjW/assets/static/optimized/rev-315e7f6/wp-content/uploads/2021/06/landscape_Hospitality_Liquor_001.jpg");" class="landscape-carousel-img lazyloaded" nitro-lazy-bg="https://cdn-ehbod.nitrocdn.com/MnwLQZiWrxfKgQoPapfeSJHycGHMrPjW/assets/static/optimized/rev-315e7f6/wp-content/uploads/2021/06/landscape_Hospitality_Liquor_001.jpg"></div>
<div>Liquor Store - Many Bottles</div>
</div>
</div>
</div>
</div>
<div class="owl-nav pp-carousel-nav">
<button type="button" role="presentation" class="owl-prev">
<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512">
<path fill="currentColor" d="M25.1 247.5l117.8-116c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L64.7 256l102.2 100.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.7 4.7-12.3 4.7-17 0L25 264.5c-4.6-4.7-4.6-12.3.1-17z" class=""></path>
</svg>
<span class="sr-only">Previous</span>
</button>
<button type="button" role="presentation" class="owl-next">
<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512">
<path fill="currentColor" d="M166.9 264.5l-117.8 116c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17L127.3 256 25.1 155.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0l117.8 116c4.6 4.7 4.6 12.3-.1 17z" class=""></path>
</svg>
<span class="sr-only">Next</span>
</button>
</div>

Answer 1

Here the answer as stated in the comment:
The problem is caused by the navigation elements parent box. It also includes the text below - therefore, you don't center it relative to the image, but to the image & its descriptive text. As you probably cannot change the html structure here I suggest you simply change the css calculation by to something like
top: calc(50% - 45px);

Answer 2

The height of the button is 66px and positions in relation to the div with class="pp-content-post-carousel pp-equal-height clearfix" which is 33.19px taller than the images.