Safari无法通过js获取图像的高度

Question

我正在创建我的网站封面。我使用js将图像显示在垂直中心。这里是代码：

function middle(){ 
     var windowHeight=window.innerHeight; 
     var infographic=document.querySelector("#infographic img"); 
     var imgHeight=parseFloat(window.getComputedStyle(infographic).height); 

     infographic.style.maxHeight=(windowHeight-120)+"px"; 

     infographic.style.marginTop=(windowHeight-imgHeight)/2+"px"; 

     console.log(windowHeight); 
     console.log(imgHeight); 
     console.log(infographic.style.marginTop); 
     console.log(infographic); 
    } 
    middle(); 

在Chrome上一切正常。但是当我在Safari上打开该网站时，它不能很好地工作。有时图像显示在底部，“imgHeight”的控制台日志为0，而我没有更改任何代码，只需点击刷新按钮即可。

Answer 1

你可以使用flex垂直和水平居中的图像，像这样：

.img-container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

更清洁，更快速，无需重新运行在窗口大小调整的脚本。注意：在上面的示例中，您的图像是img-container的唯一孩子，img-container获取视口的整个宽度和高度。示例here。