如何在跨浏览器的背景图像中居中 div？答案

【问题标题】：How do I center a div inside a background image across browsers?如何在跨浏览器的背景图像中居中 div？
【发布时间】：2014-03-10 21:26:50
【问题描述】：

所以this website 在背景图像中有内容，其中有一个正方形，但它没有居中。在 Firefox 中它太大了，而在 Chrome 中它离左边太远了，唯一居中的方法是按 ctrl+ （这会使浏览器窗口变小），即使这样它仍然没有居中。有没有人可以解决这个问题？谢谢。

【问题讨论】：

哦，对不起，是的... body { margin: 0;填充：0；行高：1.5em；字体系列：“Trebuchet MS”，Arial，Helvetica，无衬线；字体大小：12px；颜色：#989898；背景：#000000； }#container { 宽度：900px;边距：0 自动；填充：0 30 像素 10 像素 30 像素； } #content { 填充：10px 30px 0 40px;背景： url(images/content_top.jpg) 顶部中心不重复； }

标签： css html multiple-browsers

【解决方案1】：

您需要将背景图片居中：

body {
    background: #000000 url(images/waves.jpg) center top repeat-x;
}

【讨论】：

【解决方案2】：

基本上，如果您在另一个 div 内有一个 div 或在您的 html body 标签内有一个 div，如果有问题的 div 定义了宽度，您只需要

.myDiv {
margin: 0 auto;
}

【讨论】：

【解决方案3】：

这会起作用..

body {
    background: background: url(images/waves.jpg) center;
}

【讨论】：

【解决方案4】：

我个人使用百分比来居中背景图片：

background-position:50% 50%;

正文的完整代码：

body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #989898;
background-image: url(images/waves.jpg);
background-position: 50% 50%;
}

【讨论】：

该修复实际上效果很好，谢谢大家的帮助。只是最后一个问题。页脚下方似乎有一条线，我不确定它是什么或如何将其取出？再次感谢大家的帮助。
嗯，不知道你的意思，我从背景中看到类似白色阴影的东西。尝试降低页脚的高度。 #footer { 高度：32px; }
嗯，奇怪，你没有在盒子底部看到一条线吗？我截屏并在此处链接：gregonthe.net/images/oops.jpg
你忘记放链接了：P
再次降低页脚高度。你的 CSS 上帝 :) 谢谢。