一、使用CSS实现背景图居中
在HTML文件中，可以使用CSS语言实现背景图像居中。使用CSS background-position 属性可以设置背景图像距离左侧与上侧的位置。
background-position: center center;
其中，第一个 center 设置背景图像距离左侧的位置，第二个 center 设置距离上侧的位置。这样就可以实现居中的背景图像了。
二、使用HTML标签实现背景图居中
在HTML 文件中，也可以使用特定的标签将背景图像居中显示。使用以下 HTML 代码即可实现:
<body style="background-repeat:no-repeat;background-position:center center;background-attachment:fixed;background-size:cover;background-image: url(background-image.jpg)">
其中，background-size: cover 使得背景图像按比例缩放，尽可能充满背景。同时添加background-attachment: fixed 可以让背景图像固定不动, 而不是随鼠标滚动。通过设置背景图像的 Background-position 属性的值为 center center 可以使其居中显示。
三、使用JavaScript实现背景图居中
当您不想在HTML 代码中写太多样式信息，或者您想根据用户不同的屏幕尺寸和分辨率动态调整背景图像的大小和位置时，可以使用 JavaScript 来实现背景图像的居中。使用以下 JavaScript 代码即可实现:
var bgImg = document.createElement('img');
bgImg.src = 'background-image.jpg';
bgImg.onload = function() {
var bgWidth = bgImg.width;
var bgHeight = bgImg.height;
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var bgTop = (windowHeight - bgHeight)/2;
var bgLeft = (windowWidth - bgWidth)/2;
document.body.style.backgroundImage = 'url(' + bgImg.src + ')';
document.body.style.backgroundPosition = bgLeft + 'px ' + bgTop + 'px';
}
这段代码首先使用JavaScript 创建了一个 img DOM 元素， 然后从背景图像获取其宽度和高度。根据浏览器窗口的大小和背景图像的大小，计算出居中的位置。最后将 CSS 样式应用到 body 上，实现背景图像的居中显示。