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

Question

Назар Линовецкий @scriptroom

Front-end Web Developer

HTML
CSS

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

У меня есть адаптивная 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>

Вопрос задан более трёх лет назад
17601 просмотр

Комментировать

Подписаться 2 Простой Комментировать

Answer 1 · 2015-05-08 10:30:54

Николай @Chuv

.item {
	position: relative;
}

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

Ответ написан более трёх лет назад

2 комментария

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

Войдите на сайт