How to center an image in the middle of a div?

This question already has an answer here:

How to make an image center (vertically & horizontally) inside a bigger div 36 answers

---

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

.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>

---

To vertically center your div, you can use positioning. Just apply

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

to your image, and it will be vertically centered.

.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>

---

You can use the simplest way -> display: table-cell; which allows you to use vertical-align attribute

.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/75752.html

上一篇: 如何使用CSS在div中居中放置图像？

下一篇: 如何在div中间放置图像？