下面是div

<div id="over" style="position:absolute; width:100%; height:100%>
 <img src="img.png">
</div>

如何对齐图像,使其位于div的中间和中心?


当前回答

水平放置

#over img {
    display: block;
    margin: 0 auto;
    clear:both;
}

另一种方法:

#over img {
    display: inline-block;
    text-align: center;
}

只需要放置:

   #over img {

           vertical-align: middle;
        }

其他回答

img.centered {
   display: block;
   margin: auto auto;
}

使用定位。下面的方法对我很有效……

缩放到图像的中心(图像填充div):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

没有缩放到图像的中心(图像不填充div):

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

这为我工作,当你必须居中对齐图像和你的父div图像已经覆盖整个屏幕。即高度:100%,宽度:100%

#img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

使用自举程序align-items和justification -content。请看下面的例子:

<div class="well" style="align-items:center;justify-content:center;">
    <img src="img_source" height="50px" width="50px"/>
</div>

HTML:

<div id="over">
    <img src="img.png">
</div>

CSS:

#over {
  text-align: center;
}

#over img {
  vertical-align: middle;
}