Как «отцентрировать» изображение по вертикали (CSS)?

Question

[kevus]

Здравствуйте. на странице https://koreal.in.ua/ есть блок "Хиты и новинки". В нем есть товар "Двухсторонний портативный ПЭТ коврик Portable 140 x 200 x 1 см", изображение которого выравнивается по верхнему краю.

Как отцентрировать? Комбинации vertical-align не помогают.

Спасибо!

Answer 1

[profesor08]

padding и position: absolute тебе помогут, flex был бы отличным решением, но там slick slider, а его, если в блока есть flex, то его разнесет.

Answer 2

[Дмитрий]

Если флексы и гриды не используются в проекте, то разумным будет отступы в самой картинке сделать, подогнав под размер соседей, путем изменения размера холста (да даже в "деревянном" ms paint'e подобное провернуть не трудно), а после перезалить на место донора, с аналогичным именем.
Если копать код, там переписывать придется многое, ради внедрения флексов или гридов.

Comments

[profesor08]

slick просто сойдет с ума, если добавить туда флекс.

Answer 3

[skuvaWeb]

Рассказываю относительно новый хак
Родителю
position: relative;
дочернему элементу

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

И все встанет четко по центру, но можно выровнять и только по горизонтали или по вертикали