Position absolute как выровнять по центру?

Шаг 1. top: 50%; left: 50% сдвигает не центр картинки, а её левый верхний угол в центр родителя. Дальше вся картинка растёт вправо и вниз от этой точки, отсюда и смещение, которое ты видишь. Шаг 2. Добавь transform: translate(-50%, -50%). Это стандартный приём: минус 50% по ширине и высоте самого элемента отодвигают его назад ровно настолько, чтобы центр картинки встал туда, куда изначально целились top и left. position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); Шаг 3. Родитель обязательно должен быть position: relative, иначе absolute посчитает проценты от ближайшего позиционированного предка выше по дереву, а не от нужного контейнера, и центрирование поедет вообще непредсказуемо. Шаг 4. Если ширина и высота картинки известны заранее в пикселях, можно обойтись без transform: margin отрицательный на половину ширины и высоты вручную, но это менее гибко и ломается при смене размера картинки. Шаг 5. Ещё вариант — inset: 0 вместо top, left, right, bottom по отдельности, и margin: auto, но тогда картинке нужны явные width и height, иначе margin auto не сработает как надо. Шаг 6. Проверь в инспекторе, что transform реально применился, а не перебит другим правилом с более высокой специфичностью, это частая скрытая причина, когда всё написано верно, но не работает.

Добавьте transform: translate(-50%, -50%) к top: 50%; left: 50% — это сдвинет элемент на половину его размера и центрирует точно.