html - 将 HTML 元素与背景图像位置中心对齐

Question

我有一个背景图像中心定位在 body 上，如下所示:

body {
    position:relative;
    width: 100%;
    height: 100%;
    background: url(../img/backgroundMd.jpg) no-repeat center center fixed #000; 
}

我想将一个 div 对齐到图像的一部分。所以它完全覆盖了它(在不同的屏幕分辨率上)

div {
    position:absolute;
    width: 400px;
    height: 320px;
    background-color: black;
    top: ?
    left: ?
}

backgroundMD.jpg 非常大，所以它从屏幕上消失了。这就是为什么我不能制作包装器 div 并将其居中。有什么想法吗？

Answer 1

如果 div 尺寸是固定的，你可以这样做

div {
    position:absolute;
    width: 400px;
    height: 320px;
    background-color: black;
    top: 50%;
    left: 50%;
    margin: -200px 0 0 -165px;
}