css - 将 div 置于背景大小为 : cover property 的 div 中

Question

我想在我的背景图片上居中放置一张图片。

#home 是拉伸(stretch)到浏览器大小的背景图片
#hometitle 是我想要放在最上面的图片

我想将#hometitle 置于我的#home 背景之上，这样无论浏览器的大小如何，它都将位于背景图像的中心。

我试过 margin: 0 auto;然后 margin-top: 250px;紧随其后，但这只会在 250 像素的整个背景图像上方创建一个白色间隙；

position:absolute；和顶部/左侧并没有真正的帮助，因为在您调整浏览器大小时，位置将是静态的并且不会居中。

#home {
height: 1000px;
margin: 0 auto;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url("images/bigheader.png");
}

#hometitle {
background-image:url(images/title.png);
height: 260px;
width: 435px;
}

HTML:

<div id="home">
    <div id="hometitle">
    </div>
</div>

Answer 1

#hometitle {
    background-image:url(images/title.png);
    height: 260px;
    width: 435px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -130px;
    margin-left: -217px;
}

应该这样做，因为我们将主页标题图像绝对放置在浏览器渲染空间的中心。如果您对图像添加的位置有一些问题

body {position: relative;}

这是我经常使用的将元素定位在中心的最简单和最好的技术之一