javascript - 使用JQuery将img水平和垂直居中

我正在尝试使用JQuery在整个页面上垂直和水平放置此品牌徽标。它确实适用于调整浏览器的大小，但最初不起作用。请注意，此代码将调整图像大小以适合页面。我试过$（window）和$（document）JS是：

$(function() {
    var resizeToFit = function(){
        var $this = $(document);
        var imgw = $("#overlay-logo img").width();
        var pw = $this.width();
        var $overlaylogo = $("#overlay-logo img");
        $overlaylogo.css("width", pw - 100);
        var left = (pw / 2) - (imgw / 2);
        $overlaylogo.css('margin-left',left);
    }
    $(window).resize(function(){
        resizeToFit();
    });
    resizeToFit();
});

CSS：

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

HTML：

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

最佳答案

您应该只用简单的CSS就能做到这一点。

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

这是一个小提琴：http://jsfiddle.net/GheZd/

编辑
然后将高度和宽度设置为99％。您可以将这种样式直接应用于图像...您不一定需要div。

关于javascript - 使用JQuery将img水平和垂直居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18922331/