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

.frame { 显示：弹性； /** 取消注释下方的“justify-content”以水平居中。 ✪ 阅读以下内容以获得更好的垂直和水平居中方式。 **/ /* justify-content: center; */ 对齐项目：居中； } img { 高度：自动； /** ✪ 要使图像垂直和水平居中，在上面的 .frame 规则中注释 'justify-content' 和 'align-items' 声明，然后取消注释 'margin: auto;'以下。 **/ /* 边距：自动； */ } /* 演示不需要的样式 */ .frame { max-width: 900px;高度：200px；边距：自动；背景：#222； } p { 最大宽度：900px;边距：20px 自动 0； } img { 宽度：150px; }

这是使用 Flexbox 的 Pen：http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

编辑 1/13/22

使用 CSS Grid 和 place-content 简写有更好的方法：

.frame-text-grid { 显示：网格；地点内容：中心； /** ✪ “place-content”是“align-content”和“justify-content”的简写。 ✪ “place-content”简写需要两个值，第一个用于“align-content”，第二个用于“justify-content”。如果仅存在一个值（如在此演示中），则该单个值将应用于两个方向。 ✪ 评论“地点内容：中心；”上面的声明以查看元素如何沿容器的高度分布。 **/ }

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

---

这样您就可以将图像垂直居中 (demo)：

div{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}

---

此外，您可以使用 Flexbox 来获得正确的结果：

.parent { 对齐项目：中心； /* 垂直对齐 */ background: red;显示：弯曲；高度：250px； /* 对齐内容：中心； <- 水平对齐 */ width: 250px; }

---

flexbox 有一个超级简单的解决方案！

.frame {
    display: flex;
    align-items: center;
}

---

想象一下你有

<div class="wrap">
    <img src="#">
</div>

和CSS：

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}

---

您可以尝试将 PI 的 CSS 设置为 display: table-cell; vertical-align: middle;

---

CSS 网格

如果要在图像容器内垂直对齐单个图像，可以使用：

.img-container {
  display: grid;
}

img { 
  align-self: center;
}

.img-container { 显示：网格；网格自动流：列；背景：#BADA55；宽度：1200 像素；高度：500px； } img.vertical-align { 对齐自我：中心； }

如果你想在一个图像容器内对齐多个图像，你可以使用这个：

.img-container {
  display: grid;
  align-items: center;
}

.img-container { 显示：网格；网格自动流：列；对齐项目：居中；背景：#BADA55；宽度：1200 像素；高度：500px； }

请注意，我在这两种情况下都使用了 grid-auto-flow: column，因为否则元素将换行并指定显式网格项。在问题代码中，我也看到该项目水平居中。在这种情况下，只需使用 place-items: center 而不是 align-items: center。

---

你可以试试下面的代码：

.frame{ 显示：弹性；证明内容：中心；对齐项目：居中；宽度：100%； }

---

背景图片解决方案

我完全删除了图像元素并将其设置为具有 .frame 类的 div 的背景

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

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

我查了一下，这个解决方案不能缩小大于 25 像素高度的图像。有一个名为 background-size 的属性确实设置了元素的大小，但它是 CSS 3 会与 Internet Explorer 7 要求相冲突。

如果您想使用此解决方案，我建议您重做浏览器优先级并设计最佳可用浏览器，或者获取一些服务器端代码来调整图像大小。

---

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    text-align: center;
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

.frame 的键属性是 display: table-cell;。 Div.frame 显示为内联，因此您需要将其包装在块元素中。

这适用于 Firefox、Opera、Chrome、Safari 和 Internet Explorer 8（及更高版本）。

更新

对于 Internet Explorer 7，我们需要添加一个 CSS 表达式：

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}

---

你可以这样做：

演示

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 年），如本 demo on 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 包装的图像。

---

使用表格和表格单元格的解决方案

有时应该通过显示为表格/表格单元格来解决。例如，快速标题屏幕。这也是 W3 推荐的方式。我建议您查看来自 W3C.org 的名为 Centering a block or image 的链接。

这里使用的技巧是：

绝对定位容器显示为表格

垂直对齐到显示为表格单元格的中心内容

.container { 位置：绝对；显示：表格；宽度：100%；高度：100%； } .content { 显示：表格单元格；垂直对齐：中间； }

就我个人而言，我实际上不同意为此目的使用助手。

---

我的解决方案：http://jsfiddle.net/XNAj6/2/

<div class="container">
    <div class="frame">
        <img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
    </div>
</div>

.container {
    display: table;
    float: left;
    border: solid black 1px;
    margin: 2px;
    padding: 0;
    background-color: black;
    width: 150px;
    height: 150px;
}
.frame {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-width: 0;
}
.img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}

---

用纯 CSS 试试这个解决方案 http://jsfiddle.net/sandeep/4RPFa/72/

也许这是您的 HTML 的主要问题。定义 class & 时没有使用引号image height 在您的 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 标记时，它会从 top 留下 3 到 2 像素的空间。现在我减少 line-height，它正在工作。

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 */
    }

line-height 属性在不同浏览器中的呈现方式不同。因此，我们必须定义不同的 line-height 属性浏览器。

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

查看此示例，了解不同浏览器中的 line-height 不同：input height differences in Firefox and Chrome

---

我不确定 Internet Explorer，但在 Firefox 和 Chrome 下，如果您在 div 容器中有一个 img，则以下 CSS 内容应该可以工作。至少对我来说效果很好：

div.img-container {
    display: table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}

---

一种对我有用的简单方法：

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

它非常适用于谷歌浏览器。在不同的浏览器中试试这个。

---

除了像这样的一些文本之外，用于在容器内居中图像（可能是徽标）：

https://i.stack.imgur.com/sVHfi.png

基本上你包装图像

.outer-frame { 边框：1px 纯红色；最小高度：200px；文本对齐：居中； /* 仅水平对齐 */ } .wrapper{ line-height: 200px;边框：2px 蓝色虚线；边框半径：20px；边距：50px } img { /* 高度：自动； */ 垂直对齐：中间； /* 仅垂直对齐 */ }

---

如果您可以接受像素大小的边距，只需将 font-size: 1px; 添加到 .frame。但请记住，现在在 .frame 1em = 1px 上，这意味着您还需要以像素为单位设置边距。

http://jsfiddle.net/feeela/4RPFa/96/

现在它不再以 Opera 为中心了……

---

我有同样的问题。这对我有用：

<style type="text/css">
    div.parent {
        position: relative;
    }

    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>

<div class="parent">
    <img class="child">
</div>

---

你可以使用这个：

 .loaderimage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px; /* 50% of the height */
    margin-left: -30px;
 }

---

使用 table 和 table-cell 方法完成这项工作，特别是因为您还针对一些旧浏览器，我为您创建了一个片段，您可以运行它并检查结果：

.wrapper { 位置：相对；显示：表格；宽度：300px；高度：200px； } .inside { 垂直对齐：中间；显示：表格单元格； }

---

想要对齐在文本/标题之后且都在 div 内的图像？

请参阅 JSfiddle 或运行代码片段。

只要确保所有元素（div、img、title 等）都有一个 ID 或一个类。

对我来说，此解决方案适用于所有浏览器（对于移动设备，您必须使用：@media 调整您的代码）。

h2.h2red { 颜色：红色；字体大小：14px； } .mydivclass { 边距顶部：30px;显示：块； } img.mydesiredclass { margin-right: 10px;显示：块；向左飘浮; /* 如果要将文本与同一行的图像对齐 */ width: 100px;高度：100px； margin-top: -40px /* 改变这个值以适应你的页面 */; }

---

我一直在使用填充来进行中心对齐。您将需要定义顶级外部容器大小，但内部容器应该调整大小，并且您可以将填充设置为不同的百分比值。

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}

---

最好的解决方案是

.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;
}

---