Как отцентрировать картинку по вертикали внутри блока с динамической высотой?

Question

[Назар Линовецкий]

У меня есть адаптивная HTML-разметка с блоками, размер которых (по высоте и ширине) привязан к viewport и всегда меняется при ресайзе окна. Внутри этих блоков картинка . Картинка изначально ниже по высоте, чем родительский блок.
Вопрос: Как всегда (при загрузке и ресайзе) держать картинку отцентрированной по вертикали относительно высоты своего родиетля?

<div class="clearfix">
 <div class="item"><img src="1.jpg" alt=""></div>
 <div class="item"><img src="1.jpg" alt=""></div>
 <div class="item"><img src="1.jpg" alt=""></div>
 <div class="item"><img src="1.jpg" alt=""></div>
</div>

Answer 1

[Николай]

.item {
	position: relative;
}

.item img {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}

Comments

[Виктор]

Только display: block лишний, position: absolute уже это обеспечивает.

[Николай]

Да, так и есть. Поправил, спасибо.

Answer 2

[Антон]

Если IE9+, то вот способ, при котором картинка будет по центру блока, даже если она большей высоты.

.item { position: relative }
.item img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

Answer 3

[Дмитрий Шамонов]

HOW TO CENTER IN CSS

Answer 4

[Вадим Белкин]

Если нужна поддержка только современных браузеров, можно обратиться к помощи flex

.clearfix {
  display: flex;
}

.item {
  display: flex;
  align-items: center;
}

jsfiddle.net/fmy91t8f

Answer 5

[ingwar4ik]

если От IE8
Я использую такой вариант.

.item {
  position: relative;
  overflow:  hidden;
  height: 300px;
}

.item img {
  position: absolute;
  left: -50%;
  top: -50%;
  bottom: -50%;
  right: -50%;
  margin: auto;
}

Центрует картинку, если высота/ширина больше блока.

Answer 6

[rhost]

По мне так самое норм решение

jsfiddle.net/fmy91t8f/1

Answer 7

[desuvin]

Все способы центрирования на одном сайте howtocenterincss.com
Просто ставьте галочки и получите лучший способ :)