html - 使用 vh 在 div 内垂直居中

Question

我目前正在尝试将图像置于 div 中，该 div 的尺寸设置为 vh。我尝试使用使display:table-cell;图像居中但开始与其他元素的 vw 混淆的方法。我想知道是否有另一种更简单的方法可以将此图像垂直居中在一个 div 中，即 vh.h 。我知道这可能有点令人困惑，所以希望我下面的代码可以提供帮助！

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;
}

Answer 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;
}

这是工作小提琴