7

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

所以如果你看图片

挡在中心

我想让这个白色块响应。

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

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

7 回答 7

17

您可以使用 CSS 转换：

position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
于 2017-01-26T20:36:28.987 回答
14

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

因为您希望它具有响应性，您可以使用@mediaCSS3 中的功能。像这样：

@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

于 2012-09-28T18:33:02.253 回答
8

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

.your-class {
  margin-left: auto;
  margin-right: auto;
  display: table;
}
于 2015-09-16T13:56:08.317 回答
2

请试试这个：

img { max-width:100%; max-height:100%; margin:auto; }
于 2012-09-28T18:51:25.697 回答
2

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

于 2012-09-28T18:25:47.343 回答
1

我已经使用display: inline-block;元素来居中和text-align: center;父 div 上。

于 2014-08-13T05:14:19.857 回答
1 
.container{display: flex; justify-content: center; align-items: center}
于 2020-10-28T11:25:05.010 回答