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

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

谢谢贾廷。我试过这个，它奏效了！

网页， 正文 宽度：1024像素;高度： 100%; 溢出：自动; 边距：自动; 位置：绝对; 顶部： 0;左： 0;底部： 0;右：0;

主要

position: relative;
background-color: grey;