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

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;}