你可以这样做：

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";
})

这适用于现代浏览器（编辑时为2016年），如codepen上的演示所示

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

给图像一个类或使用继承来以需要居中的图像为目标是非常重要的。在本例中，我们使用了.frame img｛｝，因此只有由类为.frame的div包装的图像才会成为目标。

除了像这样的文本外，还可以将图像居中放置在容器内（可以是徽标）：

基本上，您可以包装图像

.外框{边框：1px纯红色；最小高度：200px；文本对齐：居中；/*仅水平对齐*/}.包装器{线条高度：200px；边框：2px蓝色虚线；边框半径：20px；边距：50px}国际货币基金组织{/*高度：自动*/垂直对齐：中间；/*仅垂直对齐*/}<div class=“外框”><div class=“wrapper”>一些文本<img src=“http://via.placeholder.com/150x150"></div></div>

我为这个老问题添加了一个新的解决方案，因为我发现答案中没有包含我的首选方法。

在每个项目中，在一开始，我创建了2个CSS类

.flex-centered {
    display: flex; 
    flex-direction-column; 
    justify-content:center
}
.abs-centered {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%)
}

根据情况，您可以将两种元素置于中心。

flex centre对于页面上的图像和内容更加通用，abs居中需要一个相对的父级，这对居中的div很好，就像弹出窗口一样。

所以你只要打电话

   <div class='flex-centered'>
        <img>
    </div>

并且图像垂直居中。

.flex居中{显示：柔性；弯曲方向：柱；对齐内容：中心；}/*这也是水平居中*/.m0a时{边距：0自动}/*让一个大家长变成灰色*/.大div｛高度：200px；宽度：200px；背景：#ccc；边界半径：4px；}/*制作一个小div以居中*/.small div｛高度：20px；宽度：20px；背景：红色；}<div class=“flex center big div”><div class=“small div m0a”></div></div>

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

.框架{显示：柔性；/**取消注释下面的“对齐内容”，使其水平居中。✪ 阅读以下内容，了解垂直和水平居中的更好方法。**//*对齐内容：中心*/对齐项目：居中；}国际货币基金组织{高度：自动；/**✪ 为了使该图像垂直和水平居中，在上面的.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

最好的解决方案是

.block{
    /* Decor */
    padding:0 20px;
    background: #666;
    border: 2px solid #fff;
    text-align: center;
    /* Important */
    min-height: 220px;
    width: 260px;
    white-space: nowrap;
}
.block:after{
    content: '';
    display: inline-block;
    height: 220px; /* The same as min-height */
    width: 1px;
    overflow: hidden;
    margin: 0 0 0 -5px;
    vertical-align: middle;
}
.block span{
    vertical-align: middle;
    display: inline-block;
    white-space: normal;
}