如何将内容水平居中对齐并固定在左侧？

Question

我想构建一个页面，以便所有内容都在页面中间。但是当我调整浏览器的大小时，内容会向左转，我什至无法滚动它。

我想要这样的东西：https://www.apple.com/au/mac/。

这里所有内容都在中间，如果我将浏览器的大小调整为更小的宽度，那么我仍然可以水平滚动以查看所有内容。

我尝试过类似的操作，但是当我调整浏览器大小时，我的内容会超出左边距，并且无法向左滚动。

这是代码。

CSS：

html, body
    width: 100%; height: 100%;



main
    position: absolute; top:0; left: 0;
    width: 1000px; height: 100%;
    left: 50%;  margin-left: -500px;
    border: 1px solid;

Answer 1

谢谢贾廷。我试过了，它成功了！

html，正文 宽度：1024px；高度：100%； 溢出：自动； 边距：自动； 位置：绝对； 顶部：0；左：0；底部：0；右：0；

主要

position: relative;
background-color: grey;

Answer 2

不要使用绝对位置。试试这种风格作为你的主要风格：

.main { margin: 0 auto;}