如何在div中将垂直对齐方式设置为中心

Question

我如何将.arrow居中于.prev和.next垂直居中，并根据.mySlides的高度而做出响应，因为它随内容而变化。我尝试调整位置，顶部，变换，边距顶部，行高，但无法获得所需的结果。这是完整的代码：https://jsfiddle.net/t8ap0gvz/4/

.prev {
grid-area: 1 / 1 / 4 / 1;
color: white;
font-weight: bold;
font-size: 40px;
opacity: 0.5;
background: yellow;
border-radius: 15px 0 0 15px;
border: 1px solid red;
left: 10%;
position:relatve
}

.next {
grid-area: 4 / 4 / 1 / 3;
color: white;
font-weight: bold;
font-size: 40px;
opacity: 0.5;
background: yellow;
border-radius: 0 15px 15px 0;
border: 1px solid red;
position:relatve
}


.arrow {
transform: translateY(-50%);
}