scriptroom
@scriptroom
Front-end Web Developer

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

У меня есть адаптивная 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>
  • Вопрос задан
  • 16717 просмотров
Пригласить эксперта
Ответы на вопрос 7
.item {
	position: relative;
}

.item img {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}
Ответ написан
@f0rmat1k
Если IE9+, то вот способ, при котором картинка будет по центру блока, даже если она большей высоты.

.item { position: relative }
.item img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
Ответ написан
Комментировать
DMShamonov
@DMShamonov
Frontend developer
Ответ написан
Комментировать
@BelkinVadim
Frontend разработчик
Если нужна поддержка только современных браузеров, можно обратиться к помощи flex
.clearfix {
  display: flex;
}

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

jsfiddle.net/fmy91t8f
Ответ написан
Комментировать
@ingwar4ik
если От IE8
Я использую такой вариант.
.item {
  position: relative;
  overflow:  hidden;
  height: 300px;
}

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

Центрует картинку, если высота/ширина больше блока.
Ответ написан
Комментировать
hoOstel
@hoOstel
По мне так самое норм решение

jsfiddle.net/fmy91t8f/1
Ответ написан
Комментировать
@desuvin
Все способы центрирования на одном сайте howtocenterincss.com
Просто ставьте галочки и получите лучший способ :)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы