在具有vh单位的div中垂直居中

Question

我目前正在尝试将一张图片居中放置在一个使用vh设置尺寸的div内。我尝试了使用display:table-cell;方法来居中图片，但它开始影响到其他元素的vw值。我想知道是否有另一种更简单的方法来垂直居中这张图片在一个使用vh的div内。我知道这可能有点混乱，希望下面的代码能够帮助理解！

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

- kduan

---

@Sid，不幸的是我不能使用那种方法，因为你需要指定一个高度，而我无法使用vh。 - kduan

创建一个JSFiddle。给我们展示你到目前为止尝试过的内容。当你说要干扰其他元素时，这些其他元素是哪些具有相同类名的元素？ - Dejan.S

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

Here is the working fiddle

- Ashish Balchandani

---

虽然这样可以正确地将图像居中，但会使其下方的内容消失。有什么建议吗？非常感谢你迄今为止的帮助！ - kduan

你能更新一下 Fiddle 上的代码吗？我可以帮你解决它。 - Ashish Balchandani

没事了，我解决了！只需要从 .graphic 中删除 position: absolute; top:0; bottom:0; width: 100%; 就可以了。谢谢！你能稍微解释一下这是如何工作的吗？ - kduan

它将定位img和应用margin:auto结合起来，在这种情况下能够奏效。 - Ashish Balchandani