CSS响应式居中Div

Question

我想把一些带有背景图片的 div 居中。这个 div 的响应存在问题，因为如果我将宽度设置为 80％，高度设置为 80％，则背景图片不会居中显示。我尝试了所有方法，但图片无法居中，如果浏览器大小不同，这是一个很大的问题。

所以，如果您看一下图片：

我想让这个白色块具有响应性。

这里有一点 CSS，我已经写好了，但现在还没有响应：

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

- user1257255

Answer 1

您可以使用CSS transform属性：

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

- Steve Glick

Answer 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和margin-top。此外，您应该更改background标记！它会将图像居中于页面上。你可以在Créations MicroWeb - Carrières查看一个例子。即使你改变窗口大小，图像仍然完全居中。

你可以在body上添加overflow: hidden;，以使页面在分辨率过低时不能滚动。就像我所做的一样。 编辑：JSFiddle

- Frederick Marcoux

---

响应式像Bootstrap一样吗？背景会随着设备屏幕的大小而调整吗？ - Frederick Marcoux

是的，如果有人有较小的屏幕以显示较小的背景图片，而如果有人有更大的屏幕，则仅显示全宽/高的图片，没有其他任何内容。 - user1257255

现在div真正居中了，但响应仍然存在问题。如果我设置max-width，这意味着如果某人使用太大的屏幕打开此站点，则div将消失。当某人使用小屏幕访问我的站点时，我需要制作较小的图像，但我不知道如何做到这一点。我需要JavaScript来检查浏览器的宽度和高度吗？ - user1257255

是的，使用 max-width 可以实现。但你也可以使用 min-width，例如 @media (min-width: 1280px) { }，这样任何大于此尺寸的屏幕都会显示所选的图像。 - Frederick Marcoux

Answer 3

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

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

- monteirobrena

---

这背后的理论是什么？ - Phil

Why display: table;? - Daniel Kaplan

Answer 4

请尝试以下操作：

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

- suresh gopal

Answer 5

如果要让一个div水平居中，只需要在样式中添加margin:0 auto;，但前提是这个div的宽度必须小于容器div的宽度。

- thatidiotguy

---

是的，但 div 应该是绝对定位的，所以这不是一个选项。 - user1257255

Answer 6

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

- Dharmadurai

---

请添加一条描述说明，解释为什么这个答案对提问者有帮助。 - Parth Raval

Answer 7

我在元素上使用了代码 display: inline-block; 来居中，同时在父级 div 上使用了 text-align: center;。

- kravits88