很长一段时间，我也尝试了解决方案，把img放在div的中心，但对于我的情况下，我只需要这种类型的组件在ajax加载进度，所以我简单地尝试了以下解决方案，希望这对你有帮助!

<div id="loader" style="position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: 1;background: rgba(255,255,255,0.5) url('your_image_url') no-repeat center;background-size: 135px;display: none;"></div>

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

缩放到图像的中心(图像填充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;
    }

标记的答案将不会垂直对齐图像。适合现代浏览器的解决方案是flexbox。flex容器可以配置为水平和垂直对齐其项。

<div id="over" style="position:absolute; width:100%; height:100%; display: flex; align-items: center; justify-content: center;">
    <img src="img.png">
</div>

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

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

这应该有用。

测试要点:要运行代码段，请单击左键运行代码段，然后单击右链接完整页

#渐变{ 位置:固定;z - index: 10; 上图:0;右:0;底:0;左:0; 透明度:0.8;背景:黑色; 宽度:100%;高度:100%; text-align:中心; ｝ .faders{显示:inline-block;高度:100%;vertical-align:中间;} .faderi{显示:inline-block; vertical-align:中间;} < div id = "渐变" > < span class = "投篮" > < / span > <img class="faderi" src="https://i.stack.imgur.com/qHF2K.png" /> < / div >

很长一段时间，我也尝试了解决方案，把img放在div的中心，但对于我的情况下，我只需要这种类型的组件在ajax加载进度，所以我简单地尝试了以下解决方案，希望这对你有帮助!

<div id="loader" style="position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: 1;background: rgba(255,255,255,0.5) url('your_image_url') no-repeat center;background-size: 135px;display: none;"></div>