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

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

<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>

身体{ 保证金:0; ｝ #over img { margin-left:汽车; margin-right:汽车; 显示:块; ｝ <div id="over" style="位置:绝对;宽度:100%;高度:100%”> < img src = " http://www.garcard.com/images/garcard_symbol.png " > < / div >

JSFiddle

我已经尝试了许多方法，但只有这一种适用于容器div中的多个内联元素。下面是将div中的所有内容对齐在中间的代码。

CSS

.divContainer
{
    vertical-align: middle;
    text-align: center; <!-- If you want horizontal center alignment -->
}
.divContainer > *
{
    vertical-align: middle;
}

HTML

<div class="divContainer">
    <span>Middle Text</span>
    <img src="test.png"/>
</div>

示例代码在这里:https://jsfiddle.net/yogendrasinh/2vq0c68m/

很长一段时间，我也尝试了解决方案，把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>

这也可以使用Flexbox布局完成:

静态的大小 .parent { 显示:flex; 身高:300 px;/*或者*/ background - color: # 000; ｝ .child { 宽度:100 px;/*或者*/ 身高:100 px;/*或者*/ 保证金:汽车;/ *魔法!* / ｝ < div class = "父" > <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/> < / div >

动态规模 Html, body { 宽度:100%; 高度:100%; 显示:flex; background - color: # 999; ｝ * { 保证金:0; 填充:0; ｝ .parent { 保证金:汽车; background - color: # 000; 显示:flex; 高度:80%; 宽度:80%; ｝ .child { 保证金:汽车;/ *魔法!* / max-width: 100%; max-height: 100%; ｝ < div class = "父" > <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/> < / div >

我在这篇文章中找到了一个例子，它很好地解释了如何使用布局。