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

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

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

.main { margin: 0 auto;}

Answer 2

谢谢贾丁。我试过这个并且它有效！

html，身体     宽度：1024px;身高：100％;     溢出：自动;     保证金：自动;     位置：绝对;     顶部：0;左：0;底部：0;右：0;

主

position: relative;
background-color: grey;