How to center an image in the middle of a div?
This question already has an answer here:
简单而简单的方法来做到这一点,
.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中间放置图像?