这段代码对我很有用。

<style>
    .listing_container{width:300px; height:300px;font: 0/0 a;}
    .listing_container:before { content: ' ';display: inline-block;vertical-align: bottom;height: 100%;}
    .listing_container img{ display: inline-block; vertical-align: middle;font: 16px/1 Arial sans-serif; max-height:100%; max-width:100%;}
<style>

<div class="listing_container">
    <img src="http://www.advancewebsites.com/img/theme1/logo.png">
</div>

使用纯CSS尝试此解决方案http://jsfiddle.net/sandeep/4RPFa/72/

也许这是HTML的主要问题。在HTML中定义类和图像高度时，不使用引号。

CSS:

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    position: relative;
    margin: 1em 0;
    top: 50%;
    text-align: center;
    line-height: 24px;
    margin-bottom: 20px;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    line-height: 0;
    margin: 0 auto;
    max-height: 25px;
}

当我处理img标记时，它会从顶部留出3像素到2像素的空间。现在我降低了线的高度，它开始工作了。

CSS:

    .frame {
        height: 25px;      /* Equals maximum image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height: 22px;
        *:first-child+html line-height:24px; /* For Internet Explorer 7 */
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
        line-height: 0;    
        max-height: 25px;
        max-width: 160px;
    }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .frame {
        line-height:20px; /* WebKit browsers */
    }

线条高度属性在不同的浏览器中呈现不同。因此，我们必须定义不同的线宽属性浏览器。

检查此示例：http://jsfiddle.net/sandeep/4be8t/11/

查看以下关于不同浏览器中线条高度差异的示例：Firefox和Chrome中的输入高度差异

背景图像解决方案

我完全删除了image元素，并使用.frame类将其设置为div的背景

http://jsfiddle.net/URVKa/2/

这至少在Internet Explorer 8、Firefox 6和Chrome 13上运行良好。

我检查过了，这个解决方案无法缩小超过25像素高度的图像。有一个名为backgroundsize的属性可以设置元素的大小，但CSS 3会与Internet Explorer 7的要求相冲突。

我建议你要么重做你的浏览器优先级，为最好的可用浏览器设计，要么获取一些服务器端代码来调整图像大小，如果你想使用这个解决方案。

对于更现代的解决方案，如果不需要支持旧版浏览器，您可以这样做：

.框架{显示：柔性；/**取消注释下面的“对齐内容”，使其水平居中。✪ 阅读以下内容，了解垂直和水平居中的更好方法。**//*对齐内容：中心*/对齐项目：居中；}国际货币基金组织{高度：自动；/**✪ 为了使该图像垂直和水平居中，在上面的.frame规则中，注释“justify content”和“对齐项目”声明，然后取消注释“margin:auto；”在下面**//*边距：自动*/}/*演示不需要的造型材料*/.框架{最大宽度：900px；高度：200px；边距：自动；背景：#222；}p型{最大宽度：900px；边距：20px自动0；}国际货币基金组织{宽度：150px；}<div class=“frame”><img src=“https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png"></div>

这是一支使用Flexbox的钢笔：http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

编辑1/13/22

有一种更好的方法可以使用CSS网格和地方内容速记来实现这一点：

.frame文本网格{显示：栅格；放置内容：中心；/**✪ “放置内容”是“对齐内容”和“调整内容”的缩写。✪ “放置内容”速记需要两个值，第一个用于“对齐内容”，第二个用于“调整内容”。如果仅存在一个值（如本演示中所示），则该值将应用于两个方向。✪ 注释上面的“place content:center；”声明，以查看元素如何沿着容器的高度分布。**/}<div class=“ctnr框架文本网格”><h2>使用Grid和<code>放置内容</code></h2><p>垂直和水平居中只需要两条线</p＞</div>

这是一支使用CSS网格的钢笔：https://codepen.io/ricardozea/pen/c4e27f1e74542618d73e21f7c2276272?editors=0100

你可以这样做：

Demo

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;
    
    text-align: center; 
    margin: 1em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 160px;
    top: 50%;           /* Here.. */
    left: 50%;          /* Here... */
    position: absolute; /* And here */
}    

JavaScript

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})

使用table和table cell方法完成这项工作，特别是因为您也针对一些旧浏览器，我为您创建了一个代码段，您可以运行它并检查结果：.包装器{位置：相对；显示：表格；宽度：300px；高度：200px；}.内部{垂直对齐：中间；显示：表格单元格；}<div class=“wrapper”><div class=“inside”><p>请让我居中</p＞</div><div class=“inside”><img src=“https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" /></div></div>