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

Question

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

Answer 1

这将工作..

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

Answer 2

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

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%;
}

Answer 3

您需要将背景图像居中：

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

Answer 4

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

.myDiv {
margin: 0 auto;
}