Javascript 使用JQuery水平和垂直居中img

我试图用JQuery在整个页面上垂直和水平居中放置这个品牌徽标。它在调整浏览器大小时确实起作用，但最初不起作用请注意，此代码调整图像大小以适应页面。我尝试了$（窗口）和$（文档）JS：

CSS:

HTML:

---

您应该能够通过直接的css来实现这一点

#overlay-logo{    
    height:99%;
    width:99%;
    margin:auto;
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
}

这是一把小提琴：

编辑

---

那就让你的身高和宽度达到99%。您可以将此样式直接应用于图像…您不一定需要div。

第一次运行可能是在图像本身加载之前。尝试在图像上添加

load

侦听器。此外，

function（）{resizeToFit（）；}

在这里是多余的；只需直接发送

resizeToFit

。在标签上添加宽度/高度属性以及图像的尺寸。宽度/高度计算将在第一次“运行”时正确。我需要它调整图像大小以适应页面。我编写的jquerycurrent就是这样做的。我编辑了我的答案来说明这一点。

#overlay-logo{
position:absolute;
top:50%;
z-index: 999999;
}

<div id="overlay-logo">
  <img src="img/overlay.png" alt="overlay" />
</div>

#overlay-logo{    
    height:99%;
    width:99%;
    margin:auto;
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
}