Как выровнять изображения по центру?

Question

[Евгений Петров]

Есть блок с аватаркой пользователя размером 200x200px
Аватарку можно загрузить как квадратную, так и вертикальную.
Если загрузить квадратную - она стоит нормально, если вертикальную - показывается криво
Как можно разместить аватарку по центру блока относительно высоты?

Comments

[Иван]

flex

Answer 1

[Конан Варвар]

Если аватарка у вас задается через тег img то вот так:

img {
  object-fit: cover;
  object-position: center;
}

Если через background:

.image {
  background: url() no-repeat center;
  background-size: cover;
}

А вообще если хотите получить нужный ответ, то присылайте ссылку на песочницу. Так будет лучше.

Answer 2

[Ivan Ukhov]

родителю ставишь position: relative;
а аве
position: absolute;
top50%;
transition: translateY(-50%);

Answer 3

[Igor Koch]

https://jsfiddle.net/whata/r2ng5f6h/