如何在div中间放置图像？

这个问题在这里已经有了答案：

如何在更大的div内制作图像中心（垂直和水平）36个答案

---

简单而简单的方法来做到这一点，

.test {
  background-color: orange;
  width: 700px;
  height: 700px;
  display:flex;
  align-items:center;
  justify-content:center;
}

<div class="test">
<img src="http://via.placeholder.com/350x150">
</div>

---

要垂直居中您的div，您可以使用定位。 只需申请

position: relative;
top: 50%;
transform: translateY(-50%);

到你的形象，它将被垂直居中。

.test {
  background-color: orange;
  width: 700px;
  height: 700px;
  text-align: center;
}

.test>img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<div class="test">
  <img src="http://via.placeholder.com/350x150">
</div>

---

你可以用最简单的方法 - > display：table-cell; 它允许你使用垂直对齐属性

.test {
  background-color: orange;
  width: 500px;
  height: 300px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

<div class="test">
<img src="http://via.placeholder.com/350x150">
</div>

链接地址: http://www.djcxy.com/p/75751.html

上一篇: How to center an image in the middle of a div?

下一篇: Image in absolute position div