CSS响应中心部门

Question

我想将一些有背景图像的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;

Answer 1

我想在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 */
    }
}

您使用的max-width是设备屏幕的最大宽度。您只需复制它并更改图像的width, height, margin-left and margin-top即可。此外，您应该更改background代码！

它会将图像置于页面中心。

您可以在Créations MicroWeb - Carrières看到一个示例。即使您更改窗口侧，图像也会完全居中。

您可以在overflow: hidden;上添加body，以便在分辨率太低时使页面不可滚动。就像我一样。

编辑：JSFiddle

Answer 2

尝试使用自动边距并显示为表格：

.your-class {
  margin-left: auto;
  margin-right: auto;
  display: table;
}

Answer 3

您可以使用CSS转换：

position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

Answer 4

请试试这个：

img { max-width:100%; max-height:100%; margin:auto; }

Answer 5

只要宽度小于容器div的宽度，就可以使用margin:0 auto;水平居中div。

Answer 6

我在元素中使用了display: inline-block;，在父div上使用了text-align: center;。

Answer 7

.container{display: flex; justify-content: center; align-items: center}