javascript - 以更高的分辨率居中页面布局

Question

我正在一个有一些大图像等显示的网站上工作。在我的屏幕上，分辨率为 1024 x 768，它完全适合屏幕，从左到右。

然而，在我的客户的屏幕上，他的分辨率更大，他认为屏幕的右侧部分是空白的，并希望我将布局居中而不是左对齐。（我的左边距设置为 0。）

如果我只是增加左边距，它将导致水平滚动条出现在像我这样的较低分辨率上。

有什么方法可以解决所有分辨率的问题吗？或者我是否必须求助于使用 javascript 来检测屏幕分辨率，如果分辨率大于某个值，则增加左边距？

Answer 1

#wrapper { margin: 0 auto; width: 960px; }

这将使 id="wrapper" 的元素水平居中，因此如果您的所有内容都在该元素内，则您的页面将居中

基本上，如果您应用 margin-left: auto; 和边距：自动；对于块元素，它将水平居中

Answer 2

围绕你想要居中的所有元素创建一个容器元素，并给它一个 id，id="container"然后添加一个css选择器以使其居中。

#container {
  margin: auto
}