如何在div的中间居中放置图像? [英] How to center an image in the middle of a div?

问题描述

我需要将图像居中放置在div的中间.

I need to center an image in a middle of a div.

<div class="main">
    <img...>
</div>

在下面的示例中，图像居中，但不在中间.

In the example below the image is centered, but not in the middle.

https://jsfiddle.net/web_garaux/tng7db0k/

推荐答案

简单易行的方法，

.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的中间居中放置图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！