html - 在具有背景图像的 Div 中垂直居中图像？ (没有任何工作)

Question

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

我正在为个人网站设计页眉/横幅，虽然我设法将我的 IMG 集中在它的容器 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>

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

我一直在使用带有负边距的绝对定位来居中我的图像，并且自己放弃了垂直对齐。对左侧和顶部使用 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