网页超出浏览器宽度？让内容居中显示的两种方法

当网页宽度超出浏览器可视区域时，默认情况下可能会出现横向滚动条，用户需要手动滚动查看页面内容。为了提升用户体验，我们可以让网页内容在可视区域内居中显示，这样即使网页宽度超过浏览器宽度，用户也可以完整地看到页面内容。

内居中显示的方法有很多种，以下是其中两种：

使用CSS设置网页居中显示：

body {
  margin: 0 auto;
  max-width: 100%;
  overflow-x: hidden;
}

这样设置可以让页面在浏览器窗口缩小时自动调整宽度，同时让页面居中显示。

使用JavaScript设置网页居中显示：

function centerPage() {
  var windowHeight = window.innerHeight;
  var pageHeight = document.documentElement.scrollHeight;
  var margin = (windowHeight - pageHeight) / 2;
  document.body.style.marginTop = margin + 'px';
}

window.onload = centerPage;
window.onresize = centerPage;

这段代码可以让页面在加载和浏览器窗口缩放时自动居中显示。