Как отцентрировать абсолютно позиционированный блок по горизонтали?

Нужно чтобы полное фото с дорогой при наведении на квадратный блок появлялось на том же месте, и я никак не могу сдвинуть его так, чтобы было на том же месте, оно либо двигается не так как надо, либо не туда, куда надо. С одуванчиком у меня получилось отцентрировать вертикально с помощью флексбокса, но с горизонтальное центрирование мне не даётся.

        <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;
    }
}

}