Question

就像www.stackoverflow.com一样，只使用页面的中心，同时保留顶部的标题。到目前为止看我的布局 - 它使用整个屏幕，无论是调整大小还是最大化。所以基本上我想保留所有窗口大小的标题，但是只使用页面的中心来显示其他3个div。

enter image description here

Answer 1

您需要的第一件事是“包含”整个网站的一些包装元素。例如......

<强> HTML

<body>
<div class="wrapper">

<!-- REST OF SITE HERE (OR ANYTHING YOU WANT CENTERED -->

</div><!-- END WRAPPER -->
</body>

然后是一些简单的CSS ...包装元素必须有一些你定义的宽度，以及一个特定的边距代码。如果站点具有响应性，则需要动态宽度，并具有额外的最大宽度。在下面的代码中，实际进行居中的是margin: 0 auto;。然而，重要的是要注意宽度。如果你有100％的宽度，没有声明最大宽度，那么“居中”是不明显的，因为div占据了包含它的任何元素宽度的100％。

<强> CSS

.wrapper {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

如果您不希望将整个网站置于中心位置，只需稍微更改一下HTML，也可以更改您的类名，以便在使用它的上下文中更有意义...例如，如果您只希望内容区域居中......

<强> HTML

<body>
<header></header>

<div class="content-wrapper">

<!-- ALL OF YOUR CONTENT HTML HERE -->

</div><!-- END CONTENT WRAPPER -->

<footer></footer>
</body>

<强> CSS

.content-wrapper {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

Answer 2

将容器包装在任何包装器（比如div）中然后分配css margin：0 auto是一个很好的做法。这样它就可以集中指向屏幕。例如：

 <div class="wrapper">

      All the stuff in here

 </div>

.wrapper { 保证金：0自动; //连同其他重置样式表 }

Answer 3

我建议你在css中使用calc（）。与其他人提出的其他解决方案不同，使用以下代码：

.wrapper
{
   width:calc(100% - 50px);
   margin:0 auto;
}

你可以让包装器div始终居中并且主要适应浏览器窗口宽度，并且两个边距总是保持相同的px量。因此，如果您更改窗口宽度，则只会更改Wrapper的宽度，而不会改变它的边距。

更新：对于IE8的复古兼容性，有一些js polyfill，如：

Answer 4

将标题的宽度设置为100％，将容器的宽度设置为例如80％与margin:0 auto;

这是 fiddle

此外，将html和body的边距和填充设置为零以摆脱页面周围的空白是一件好事

Answer 5

你可以用两个div（第一个在第一个内）做一个糟糕的技巧（但很容易）。第一个将有保证金 - 剩下50％，只有当你知道页面的宽度px时，第二个div将有左边距：-ZZZpx，ZZZ是宽度尺寸的一半。

如何将我的网页居中以占用相同的空间？

5 个答案: