你可以通过使用display:flex CSS属性轻松做到这一点:

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

  

这应该有用。

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

#渐变{ 位置:固定;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 >

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

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

#over {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    height: 100px;
}

根据您的需要修改高度值。

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

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