html - 在这种情况下如何垂直居中 img

Question

在这种情况下，我如何垂直居中 img？

http://imgur.com/a/MWOND

我一直在尝试遵循以下链接中的代码，但可能是因为 divi 构建器和当前布局的设置方式无法正常工作。

https://designpieces.com/2012/12/vertical-centering-image-in-a-div/

Answer 1

您可以将父级设置为 position: relative 然后绝对定位图像 left: 50%;顶部:50%； transform: translate(-50%,-50%); 把它放在中间。

body {
  margin: 0;
}
div {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: #aaa;
}
img {
  max-width: 100px; /* this isn't necessary */
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

<div>
  <img src="https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg">
</div>

你也可以使用 flexbox 和 justify-content: center; align-items: center; 使图像居中

body {
  margin: 0;
}
div {
  width: 100vw;
  height: 100vh;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  max-width: 100px; /* this isn't necessary */
}

<div>
  <img src="https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg">
</div>