Html 将元素居中放置在可调整大小的背景上的固定位置

我试图将一个精确大小的元素放在专门为其构建的背景上，以使其看起来无缝

在以下代码中，

#window

表示浏览器的窗口大小（以像素为单位）（将其更改为任意值）

#background

显然是指我将要使用的背景图像，而

#positionMe

是我想要放在背景上的对象。我希望背景在浏览器中始终居中，即使窗口已调整大小，并且我希望小猫始终在背景的黑框中居中

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

HTML:

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

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

---

这说明了我的问题。

结合使用

显示：表格单元格

和

垂直对齐：居中

将使图像垂直居中。此外，您只需使用

text align:center

将图像水平居中即可

可能需要做一些调整以保持背景div居中。因此，我们添加另一个div并设置为

display:table

。“表格单元格”将填充整个内容。现在，我们使用

边距：0 auto

将表格居中

最终产品：

可能需要进行一些更新，以使图像与边框完全居中（因为它具有宽度…）

---

我希望你知道有很多关于这个话题的文章。四处搜索。您将找到您的答案：）

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

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

或者对于纯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;
}

---

不完全是我想要的（不是你自己的错——我只是没有充分解释我的问题），但是你投入了工作，所以你得到了赞许。：-）谢谢你的纯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;
}