html - 如何在div中将垂直对齐设置为响应中心

Question

我如何在 .prev 和 .next 中垂直居中 .arrow 并响应 .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%);
}

标签： htmlcss