Question

我正在尝试将精确尺寸的元素置于专门为其构建的背景上，以使其看起来无缝。

在以下代码中，#window表示浏览器的窗口大小（以像素为单位）（将其更改为任何内容）。 #background显然是指我将要使用的背景图像，#positionMe是我想要适合背景的对象。我希望背景总是在浏览器中居中，即使窗口调整大小，我希望小猫始终在背景上的黑框中居中。

正如您在下面看到的，问题是背景不是以视口为中心开始的;它基于浏览器的总宽度居中。当您调整屏幕大小时，它不会相应调整。

HTML：

<div id="window">
    <div id="background">
        <img id="positionMe" src="http://cs421018.vk.me/v421018778/74bc/NearuIJQIck.jpg" />
    </div>
</div>

CSS：

#window {
    background-color: red;
    width: 1280px;
    height: 720px;
}
#background {
    background: url('http://i.imgur.com/xzDclz5.jpg') no-repeat;
    width: 500px;
    height: 500px;
    margin: 0 auto;
}
#positionMe {
    position: relative;
    top: 174px;
    left: 154px;
}

此Fiddle证明了我的问题。

Answer 1

使用display:table-cell和vertical-align:center的组合会使图像垂直居中。此外，您只需使用text-align:center水平居中图像即可。

http://jsfiddle.net/reinmcha/XtQ37/10/

可能需要稍微调整以保持背景div居中。所以，我们添加另一个div并设置为display:table。 “表格单元格”将填满整个事物。现在我们将表格置于margin: 0 auto。

的中心位置

最终产品：

http://jsfiddle.net/reinmcha/XtQ37/20/

可能需要进行一些更新才能使图像与边框完美对齐（因为它有宽度......）

Here's my go at it.

我希望您知道有很多关于这个主题的文章。搜索一下。你会找到答案：）

Answer 2

你基本上有两个选项，一个是使用div来显示图像并使图像成为居中的背景，如下所示：

<div id="window">
    <div id="background">
        <div id="centerMe"></div>
    </div>
</div>

用css：

#centerMe {
width: 100%;
height: 100%;
background: url('http://cs421018.vk.me/v421018778/74bc/NearuIJQIck.jpg') no-repeat center;
}

或纯css解决方案：

#background {
    background: url('http://i.imgur.com/xzDclz5.jpg') no-repeat;
    width: 500px;
    height: 500px;
    margin: 0 auto;
    text-align: center;
}
#background:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#centerMe {
    vertical-align: middle;
}

将元素置于可调整大小的背景上的固定位置

2 个答案: