将具有背景图像的 Div 中的图像垂直居中？ （没有任何工作）

Question

我一整天都被困在这个问题上，请帮忙！ 我知道垂直对齐解决方案遍布 S.O，但我找不到（更重要的是理解）我的问题的优雅解决方案。

我正在为个人网站设计页眉/横幅，虽然我设法将我的 IMG 集中在它的 Container DIV 中，但它太小了。这是我的代码：

<div class="container">

        <img src="Banner/SODA8.png"/>                         

</div>

.container{
margin-top:50px;
height:200px;
min-height:200px;
background-image:url(hex/hex4.jpg);
background-position: center;
background-repeat:repeat;
background-size:cover;
line-height:300px;
}

.container img{
margin-left:auto;
margin-right:auto;
vertical-align:middle;
max-width:100%;
max-height:100%;
display:block;
}

结果如下： http://imgur.com/VoOEtQ0

“SODA”这个词太小，当我将 IMG('SODA') 的最大宽度和最大高度从 100% 更改为 200% 时，我得到以下信息：

http://imgur.com/CTCaN76

我如何获得 IMG 的大小，同时仍保持居中并让所有浏览器都支持？

不胜感激。

Answer 1

我假设你的结构是这样的：

<div class="container">
    <img src="soda.png">
</div>

在这种情况下，使用上面粘贴的代码，如果将 max-height 增加到 200%，则可以对图像应用一个负边距，即图像新尺寸高度的一半。

我一直在使用带有负边距的绝对定位来使图像居中，而我自己则放弃了垂直对齐。对 left 和 top 使用 50% 的百分比将允许您调整容器的高度或宽度（例如，如果它位于响应式网格中），然后以它的一半宽度和高度为负数将图像退回边距将居中。

.container {
    position: relative;
    margin-top:50px;
    height:200px;
    min-height:200px;
    background-image:url(hex/hex4.jpg);
    background-position: center;
    background-repeat:repeat;
    background-size:cover;
    line-height:300px;
}

.container img {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -(half img width/2)px;
    margin-top: -(half img height/2)px;
    display: block;
}

jsFiddle