Вертикальное центрирование внутри div с помощью vh

В настоящее время я пытаюсь центрировать изображение внутри div, у которого есть размеры, заданные с помощью vh. Я попытался использовать метод display:table-cell;, который центрировал изображение, но начал возиться с vw других элементов. Мне было интересно, есть ли еще один более простой способ вертикального центрирования этого изображения внутри div, что как vh. Я знаю, что это может быть немного запутанным, поэтому, надеюсь, мой код ниже может помочь!

Html:

<div class="graphic" style="background-color:#ff837b">
    <img src="images/WAInduo-02.svg" style="width: 100%; height: 50%;" />
</div>

CSS

#induoIntro .graphic {
    display:block;
    height:100vh;
}

Ответы

Ответ 1

Кажется, что vertical-align:middle имеет некоторое несоответствие с единицей vw. Попробуйте позиционировать подход. Вот решение для вас.

Код CSS:

.graphic {
  display: block;
  height: 100vh;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.graphic img {
  vertical-align: middle;
  width: 100%;
  display: inline-block;
  height: 50%;
  position: absolute;
  top: 0;
  bottom: 0%;
  margin: auto;
}

Вот рабочая скрипка