Центрирование при разном размере изображений

[Константин(Mushr00m)]

Здравствуйте уважаемы знатоки.

Заканчиваю верстку галереи, но возникла пара неприятных моментов.

Первый. Это проблема вертикального позиционирования "плюса" на оверлее элемента галереи.

На контейнере с плюсом у меня простые правила:

position: absolute;

top: 42%;

left: 41%;

, на скрине видно, что на верхнем элементе все выглядит как нужно, но у нижнего плюс расположен вертикально не по центру. У остальных элементов галереи такая же ситуация.

Конечно есть вариант создать для каждого размера изображения свой класс, и прописать там индивидуальные координаты, но для начала решил спросить у ведующих. Какой универсальный вариант решения данной задачи? Потому-что всех размеров не предусмотришь чтобы для всех создавать классы.

 

И вторая проблема. Это непонятный нижний отступ (помечен стрелочками) от изображения до края блока, в котором лежит изображение. Блоку я ни ширину, ни высоту не задавал, вот его правила:

margin-bottom: 29px;

display: inline-block;

position: relative;

, у изображений вообще никаких правил, это их исходные размеры. Но отступ почему-то имеется и так у каждого элемента галереи.

 

Заранее спасибо за помощь.

[npofopr]

Центрировать можно так:

position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)

 

Вторая проблема:

для img нужен display: block;

[Константин(Mushr00m)]

4 минуты назад, npofopr сказал:

Центрировать можно так:

position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)

 

Вторая проблема:

для img нужен display: block;

Вот это способ!:) Впредь буду им пользоваться. Огромное спасибо за помощь:) Все работает как нужно!