CSS响应中心部门

我想将一些具有背景图像的div居中.这个div的响应有问题,因为如果我将宽度设置为80％,高度设置为80％,则bg图像不在中心.我尝试了一切,但图片不能只是站在中心,如果浏览器更小或更大,这是一个非常大的问题.

所以,如果你看看图片

我想让这个白色块响应.

我已经编写了一些css,但现在没有响应：

top: 20%;
left: 30%;
display: block;
position: absolute;
background: url(images/background.png) no-repeat;
background-size: 750px 417px;
width: 750px;
height: 417px;

我想在2年前做同样的事情,有解决方案：

因为您希望它具有响应性,所以您可以在CSS3中使用@media函数.像这样：

@media (max-width: 480px) {
    #div {
        top: 50%; /* IMPORTANT */
        left: 50%; /* IMPORTANT */
        display: block;
        position: absolute;
        background: url(images/background.png) no-repeat center center;
        width: 750px;
        height: 417px;

        margin-top: -208.5px; /* HALF OF THE HEIGHT */
        margin-left: -375px; /* HALF OF THE WIDTH */
    }
}

您使用的最大宽度是设备屏幕的最大宽度.您只需复制它并更改图像的宽度,高度,边距左边和边距顶部.此外,您应该更改背景标记！

它将图像置于页面中心.

您可以在以下位置查看示例：Créations MicroWeb – Carrières.即使您更改窗口侧,图像也完全居中.

你可以添加overflow：hidden;当分辨率太低时,在主体上使页面不可滚动.像我一样.

编辑：JSFiddle