Html 边缘0自动不在小屏幕中居中问题

我正试图用

margin 0 auto

属性显示div中的图像。现在我面临的问题是，在大屏幕中，图像很好，而在小屏幕中，图像更向右移动，左侧留有空间。我不知道为什么会发生这种情况

这是HTML

 <div id="headerbodyimage" class="headerbody-wrapper">

 </div>

所以我的问题是如何在所有浏览器中居中放置这个div图像。

---

请帮帮我。

据我所知，您的问题是背景问题

所以你的CSS必须是

.header-wrapper {
background: url("../images/header_bg.png") repeat-x scroll 50% 0 rgba(0, 0, 0, 0);
float: left;
height: 77px;
margin: 0 auto;
position: absolute;
width: 100%;
z-index: 60001; }

---

最好的情况是边距为0的元素具有固定宽度（无百分比）。绝对位置和保证金不起作用。所以我去掉了绝对位置。 如果div的宽度是100%，那么周围的边距就不能居中，因为它总是100%。而且没有居中的空间

这很有效

.header-wrapper {
    background: url("../images/header_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    height: 77px;
    margin: 0 auto;
    width: 300px;
}

如果你需要在更大的屏幕上放大你的div。您可以添加媒体查询。请参见下面的示例。。。或者你要使用定义元素宽度的包装器

@media all and (min-width: 699px) {
 .header-wrapper {
        background: url("../images/header_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
        height: 77px;
        margin: 0 auto;
        width: 700px; /* bigger here */
    }
}

---

将宽度调整为非100%，如果宽度为100%，则它已居中，因为宽度为100%。同时杀死左边的浮子。将css类与html匹配。另外，我很惊讶它能在任何屏幕分辨率/大小上工作。摆脱浮动、绝对定位和宽度（100%）。另外，正如下面提到的，您的类名称与CSS选择器不匹配。此外，您的CSS规则与元素类的名称不同。当您使用

position:absolute

headerbody wrapper->.header wrapper您似乎从问题中复制了css并粘贴了它here@Huangism他在第二行添加了一些属性。@是的，但我在背景属性中添加了一些更改。我真的不明白我为什么要这么做downvoted@user3657431我没有投反对票，但你的回答并没有解决div不以

边距为中心的问题：0 auto

，但现在，对于什么不以中心为中心或OP希望以什么为中心，似乎很困惑。你投了反对票，因为你提出的解决方案没有解决如果我删除了float:left，我的设计正在崩溃，请创建一个标记，这样我们可以更好地帮助您。我的完整图像宽度为1600px，而图像内容为960px；因此，要在所有大小的屏幕上显示此图像，我希望在屏幕中心显示宽度为960像素的图像

@media all and (min-width: 699px) {
 .header-wrapper {
        background: url("../images/header_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
        height: 77px;
        margin: 0 auto;
        width: 700px; /* bigger here */
    }
}