Centering an image(vertically and horizontally) on another background image? - html

Question

I am trying to center an image(door)(within a div) both vertically and horizontally on another div which has a background image.
Have been stuck on this for a while..
This is what i tried so far:
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;
}
Conditions:
I need the door image smaller,like around 25% of the height of the background image.
The whole thing should be responsive
Please don't make any change to the elements.
Here's my fiddle

Answer 1

If you only need ie9+ I suggest you use the transform solution:
http://jsfiddle.net/37zHh/4/
#doorDiv{
position: absolute;
top :50%;
left: 50%;
border: solid 4px;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 25%;
}
and for the door scaling:
#doorDiv img{
max-width: 100%;
}
But as I said above, this only works ie9+ http://caniuse.com/#search=transform

Answer 2

Right o! So I have provided the code that has changed. You can clearly see whats happening here. Just centering the img using absolute and margin: auto then setting a max-width and max-height and that about does it.
HTML:
<div id="container">
<img id="door" src="http://i.imgur.com/iXiL1CS.jpg" />
</div>
CSS:
#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;
}
DEMO HERE