html整体背景居中,HTML – 如何居中背景div？

以下是我能想到的一些想法,以及他们的问题.但是,我无法重现“IE中的模糊”问题,所以我不知道哪个解决方案有或没有.

我确实把“额外标记”作为解决方案的问题,包括仅用于显示背景图像的div(#backgroundBlock),因为它不是语义的.

>描述：您的第一个解决方案

>问题：

>额外加价

>在Chrome上,根据页面大小,像素可以不同方式对齐.您可以在右边框附近的jsfiddle上看到它：

>描述：身体上有多个背景.不需要#backgroundBlock div.

body {

background: no-repeat center top url(bg.png), url(bodybg.png);

}

>问题：

>与旧浏览器不兼容(IE8,FF3.5,…; source)

>在Chrome上,与解决方案1中的对齐问题相同

>描述：使用翻译.不再有像素对齐错误.

#backgroundBlock

{

background: url(bg.png);

width: 2560px;

height: 780px;

position: absolute;

top: 0;

left: 50%;

transform: translate(-50%, 0);

}

>问题：

>额外加价

>你必须使用overflow-x：隐藏在body上以避免水平滚动条

>与旧浏览器不兼容(IE8,FF3,…; source).您还应该使用前缀来实现兼容性(-webkit-, – emz – ,…).我没有添加它们以保持示例简单

>描述：使用translate和:: before.解决方案的替代版本3.伪元素兼容性在这里不是问题,因为支持2D转换的每个浏览器都支持::之前(source).

#backgroundBlock

{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

overflow: hidden;

}

#backgroundBlock:before

{

content: '';

background: url(bg.png);

width: 2560px;

height: 780px;

position: absolute;

top: 0;

left: 50%;

transform: translate(-50%, 0);

}

>问题：

>额外加价

>与旧浏览器不兼容(IE8,FF3,…; source).您还应该使用前缀来实现兼容性(-webkit-, – emz – ,…).我没有添加它们以保持示例简单

还有其他可能性,但我认为其中大多数都会遇到上述问题之一.例如,您可以将#pageBody宽度设置为2560px,在其上设置背景,添加填充以使内容大小为820px并翻译它以使其在页面上居中(并防止使用overflow-x的水平滚动条身体).这是可能的,因为背景图像和页面主体都具有固定的宽度.