如何将绝对定位的块水平居中？

当悬停在一个方块上时，我需要带有道路的完整照片出现在同一个地方，而我只是无法移动它以使其在同一个地方，它要么没有按应有的移动，要么它没有移动到它应该移动的地方。使用蒲公英，我可以使用 flexbox 垂直居中，但不能水平居中。

        <div class="photoContainer">
            <div class="photo">
                <img src="/img/background.png" alt="" class="mainImg">
                <img src="/img/background.png" alt="" class="fullImg horizontal">
            </div>
            <div class="photo">
                <img src="/img/image.png" alt="" class="mainImg">
                <img src="/img/image.png" alt="" class="fullImg vertical">
            </div>
        </div>
    </div>

.photoContainer{
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fit, 200px);
grid-auto-rows: 200px;
grid-gap: 5px;

.photo{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;

    &:hover{
        .fullImg{
            opacity: 1;
            transition: 0.25s ease-in-out;
            z-index: 1;
        }
    }

    .mainImg{
        height: 100%;
        width: 100%;
        pointer-events: none;
        object-fit: cover;
    }

    .fullImg{
        outline: $border;
        position: absolute;
        left: 0;
        opacity: 0;
        transition: 0.5s ease-in-out;
        z-index: -1;
    }

    .vertical{
        width: 200px;
    }

    .horizontal{
        height: 200px;
    }
}

}