如何使图像居中？

Question

我有一张原始尺寸为 1024 x 1024像素的背景图片。如何将图像置于页面中心？我想在整个身体上应用图像。

body {
  background-image:url('images/bg.jpg');
  height: 1024px;
  background-repeat: no-repeat;
}

我在考虑以像素为单位给出左右边距，但是如果有更好的出路，那就更准确了。

Answer 1

你的意思是：

body { 
  background-image:url('images/bg.jpg') no-repeat center fixed; 
  -webkit-background-size: cover; /* for Chrome and Safari */
  -moz-background-size: cover; /* for Firefox */
  -o-background-size: cover; /* for Opera */
  background-size: cover; /* standard */
}

关于CSS Tricks的代码文章

Answer 2

您可以使用以下方法在中心对齐背景图像：

body {
  background: url('images/bg.jpg') no-repeat center center;
  height: 1024px;
}