html - 您如何将例如 960 像素宽的网站布局居中？

Question

...不使用 margin:0 auto;

为什么？它会导致带有滚动条的页面与没有滚动条的页面具有不同的中心位置，因此在浏览页面时，div 会跳跃。你们有什么建议，伙计们？

Answer 1

恐怕“跳跃”效果是不可避免的，因为滚动条会影响视口宽度，进而影响页面的中心线。无论技术如何（ 、 等），都会发生这种text-align: center;情况position: -50%;。

解决方法是强制垂直滚动条始终出现。用这个：

html { overflow-y: scroll; }

从这里开始，但您可以忽略该页面上的大多数示例并跳转到底部。

请注意，overflow-xandoverflow-y最初是 Microsoft 对 CSS2.x 标准overflow属性的扩展。但是两者overflow-x都overflow-y在 CSS3 中。

Answer 2

一种方法是给overflow-y: scroll;所有页面上的 HTML 标记，这样它们就会在右侧显示一个滚动条（对于不需要它的页面无效）。这样，所有页面的客户端宽度都相同。

Answer 3

纯CSS？正如其他答案所说，只是为了强制滚动条始终出现。

另一条路线将通过 JavaScript - 在 DOM 就绪时检测页面是否有滚动条，并相应地轻推容器。

Answer 4

试试这个 ：

.width960container{
    width:960px;
    min-height:500px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-250px 0 0 -480px;
}