如何让img在div中居中显示

img如图所示

div如图所示，我现在要实现的效果是使img的中间部分显示在div中，两者的css如下：

 .detail_wrapper{
    width:100%;
    height:90%;
 overflow:hidden;
 text-align:center; 
}
.detail_pic{
    height:100%;
display: inline-block; 
margin:auto; 
}

请问应该怎样修改

你的img没有宽度，这样写没有办法居中的，用定位吧

css定位你可以网上找找

这个怎么发不了代码，哭

 <div style="height:1000px;background: red;display: flex;align-items: center;justify-content: center;"><img src="1.jpg" alt="" style="display: block;width: 202px;height: 200px;" ></div>

我发的代码里面的宽高都可以修改去掉的，我本地图片太大了，所以控制了下宽高，你要是不控制宽高的话就去掉

图片无宽，父元素用的百分比，img也可用百分比这样给父元素添加text-align：center才会生效

1、直接控制图片的宽和高，用一个相同大小的div包着它，给这个div一个margin：0 auto 即可；
2、如果不想固定图片的宽高的话就在js中用绝对定位，获取屏幕宽度，图片宽度，然后计算出左边的距离值即可。

mg {display:block; margin:0 auto;}

left=(divwidth-imgwidth)/2;
top=(divheight-imgheight)/2;
样式
div{position:relative;}
img{position:absolute;}

.div {
text-align: center;
border: 1px solid #AAAAAA;
height: 130px;
overflow: hidden;
line-height: 130px;
_display: block;
_font-size: 130px;
_font-family: Arial;
padding-left: 15px;
padding-right: 15px;
}

.div img {
max-width: 100%;
max-height: 130px;
vertical-align: middle;
}

 <div class="div">
    <img src="a.jpg" >
</div>

你这个图看着感觉很乱啊。用css定位就可以搞定的。。

最简单的办法，固定好了宽高，然后定位。

https://zhidao.baidu.com/question/317482412.html

在图片的样式中写margin来控制，或者在外面的div中写padding

给图片固定的宽度和高度来实现垂直和水平方向的定位，不建议使用JS来控制。

CSS方法，设置margin:0 auto，js动态获取屏幕宽度高度和元素大小，两个相减取平均值，然后Element.style.left(Top)就可。