Question

我正在尝试居中图像（门）（在div内）垂直和水平< / strong> 在另一个有背景图片的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％。

整个事情应该是响应

请不要对元素进行任何更改。

此处my fiddle

Answer 1

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

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%;
}

和门缩放：

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

但正如我上面所说，这只适用于ie9 + http://caniuse.com/#search=transform

Answer 2

对啊！所以我提供了已经改变的代码。你可以清楚地看到这里发生了什么。只需使用img和absolute将margin: auto居中，然后设置max-width和max-height即可。

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

将图像（垂直和水平）居中放在另一张背景图像上？

2 个答案:

HTML：

CSS：