Css 如何在响应页面大小调整的.image\u容器中垂直居中图像

我当前正在使用图像容器（如下所示）

---

这段代码使div水平居中，但我不知道如何设置自动垂直对齐。有什么建议吗？

只要你有静态高度可以使用，你就可以使用几种垂直居中的策略

最简单的方法是将

行高

和

垂直对齐：中间

：

.image_container {
    width: 570px;
    height: 120px;
    margin: 275px auto 0;
    line-height: 120px;
}
.image_container img {
     vertical-align: middle;
}

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

.image\u容器{
宽度：570px；
高度：120px；
利润率：275像素自动0；
线高：120px；
}
.image_容器img{
垂直对齐：中间对齐；
}

查看：（注意：我删除了演示中的上边距）

行高

规则是一种让内联元素将整个框的高度视为一行的方法。图像将框的中间视为需要对齐的线。但是，它将对齐，使图像底部位于中点。因此，我们使用

vertical align:middle

告诉图像将其中点与直线的中点对齐

文档

• 行高

  -

• 垂直对齐

  -
试试这个

.image_container {
    width:400px;
    height: 500px;
    background:#000;
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

---

您需要为容器设置

文本对齐：居中和
行高：120px
作为容器高度，然后在容器中设置
垂直对齐：中间
到
img



HTML

<div class="image_container">
    <img src="http://placehold.it/70x70"/>
</div>

参考这个问题，。似乎不起作用。iframe中的项目跳到页面顶部并保持水平居中。在我当前的屏幕分辨率为1600x900的情况下，上页边距可以保持在页面的正确位置，但在更大的分辨率下，上页边距需要自动移到中间，而在我当前的代码下，这不会发生。啊，我明白了，我明白了，你也在使用iframe？这将缩放图像，使其为150x150。你有没有试过这个，比如说，用一个50x50的图像？如果你想给出宽度，高度，就提出来，否则就不提了。
<div class="image_container">
    <img src="http://placehold.it/70x70"/>
</div>

.image_container {
    width: 570px;
    height: 120px;
    margin: 100px auto 0;

    background:green;

    line-height:120px;
    text-align:center;
}

.image_container img{
    vertical-align:middle;
}