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

Posted 2023-02-23

【中文标题】如何将内容水平居中对齐并固定在左侧？

【英文标题】：How to align content horizontally middle and fix to the left?

【发布时间】：2015-05-10 03:30:39

【问题描述】：

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

我想要这样的东西：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;

【参考方案1】：

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

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

主要

position: relative;
background-color: grey;

【参考方案2】：

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

.main  margin: 0 auto;