CSS位置：在宽度上绝对起作用，但在高度上不起作用

Question

我正在尝试使用绝对定位将div置于另一个div的中心。我很困惑，因为代码是水平工作的，而不是垂直工作的。

<div class="issue">
                <div class="issue__cover">
                        <span class="issue__look">look inside >></span>
                </div>
</div>

.issue {

    grid-column: issue-start / issue-end;
    grid-row: 2 / -1;
    position: relative;   
    height: 100%;
    width:100%;

    &__cover {
      position: absolute;

        width: calc(100% - 25rem);
        height: calc(100% - 10rem);
        top: 50%;
        margin-top: calc(((100% - 10rem)/2)*-1);
        left: 50%;
        margin-left: calc(((100% - 25rem)/2)*-1);
        background-image: url(../img/cover_2.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top;
        z-index: 5;
    }

}