Html css中的基准高度百分比而不是宽度百分比？

我在页面中使用了以下css，以始终使图片居中：

img {
        padding: calc(49% - 306px);
    }

我的问题是“49%”是基于页面宽度，而不是我想要的高度。有什么办法可以改变吗？谢谢

---

注意：我的图片在一个

中要使其水平居中

您可以将img元素更改为div，并将图像作为背景图像，如下所示：

div {
   width:100%; 
   height:100%; 
   background:url(logo.png) center center no-repeat;
 }

---

如果没有你想要做的全部内容，我想CSS Flex是你最好的选择。我附加的代码片段向您展示了一种方法，当图像不是全尺寸背景时，可以将图像居中放置在div中

请记住，此解决方案需要为您的应用程序重新处理一点

.container{
边框：1px纯红；
保证金：0自动；
显示器：flex；
高度：500px；
宽度：500px；
证明内容：中心；
对齐项目：居中；
}

你能用吗

html，body，div.center{margin:0；height:100%；}
div.center{display:flex；align items:center；}
img{
flex:0自动；
保证金：自动；
}

没有更多的上下文，很难确定最有效的方法。你能为你的处境创造一个新的机会吗？你可以考虑。基于百分比的填充是一个元素定位器的错误方法。不，无法将计算百分比基准值从宽度更改为高度。