Html 将图像（垂直和水平）居中于另一个背景图像上？

我正在尝试将图像（门）（在一个div内）垂直和水平居中放置在另一个具有背景图像的div上

我已经在这上面呆了一段时间了

这就是我迄今为止所尝试的：

CSS：

html,body{
    height:100%;
}
#container{
    margin:0 auto;
    text-align: center;
    height:100%;
    min-height: 100%;
    height: auto !important;
    width:100%;
    background: url('http://i.imgur.com/Zd7A3rZ.png') no-repeat 0 0;
    background-size: 100% 100%;
}

#background{
    margin:0 auto;
    text-align: center;
    max-height: 100%;
    width:100%;
}

#doorDiv{
    position: absolute;
    top :50%;
    left: 50%;
    border: solid 4px;
}

条件：

• 我需要更小的门图像，比如背景图像高度的25%
• 整个过程应该是响应性的
• 请不要对元素进行任何更改

---

如果您只需要ie9+，我建议您使用转换解决方案：

对于门的缩放：

#doorDiv img{
    max-width: 100%;
}

---

但正如我上面所说，这只适用于ie9+

对！因此，我提供了已更改的代码。你可以清楚地看到这里发生了什么。只需使用

absolute

和

margin:auto

对中

img

，然后设置

max width

和

max height

即可

HTML:

---

像这样吗？只需读取“请勿更改元素lol”。@Ruddy Close，内部图像也必须有响应……它是高度和中心的

25%

。你是什么意思？嗯，门的高度一开始差不多，我的意思是。。尝试将页面宽度缩小到手机大小，而不改变高度，门的宽度和高度保持不变，对吗？（甚至认为背景是有反应的）呃，我想是吗？像这样？是的，ie9+很好。。因此，如果我必须缩短图像。。我必须用较小的图像替换门图像？不，只需将#doorDiv的宽度更改为较小的值（现在是25%），是吗？哈哈，如果你改变高度，它就会弹出。不过，说句公道话，我不知道，就我个人而言，我会选择你的解决方案，但也许我的解决方案更适合他。

#doorDiv img{
    max-width: 100%;
}

<div id="container">
    <img id="door" src="http://i.imgur.com/iXiL1CS.jpg" />
</div>

#container {
    margin:0 auto;
    text-align: center;
    position: relative;
    height:100%;
    min-height: 100%;
    height: auto !important;
    width:100%;
    background: url('http://i.imgur.com/Zd7A3rZ.png') no-repeat 0 0;
    background-size: 100% 100%;
}

#door {
    position: absolute;
    top: 0;
    bottom:0;
    right: 0;
    left:0;
    margin: auto;
    max-width:10%;
    max-height:25%;
    width: auto0;
    height: auto;
    border: solid 4px;
}