即使使用 div 包装器也无法将我的网站居中答案

【问题标题】：Can't center my website even with div wrapper即使使用 div 包装器也无法将我的网站居中
【发布时间】：2015-02-20 20:20:48
【问题描述】：

我似乎无法让我正在构建的网站居中。

我把网站放到网上给你找问题：

http://www.piccadilly.london/gourmetdinner-alpha.html 和 http://www.piccadilly.london/gourmet-alpha.css

下面是我的包装 css，如果有帮助的话：

#wrapper {
    width: 1270px;
    background-color: #ffffff;
    margin: 0 auto;

}

等待任何答案来解决这个问题 - 在此先感谢。

【问题讨论】：

因为里面的所有东西都是非静态定位的。所以你的包装 div 的大小几乎没有。因此，它不能被视为块元素。
如果你把 position: relative 放在你的#wrapper 上，除了标题之外，你将居中。您有一个固定的带有标题，除非您将宽度调整为包含元素的百分比，否则它将保持左对齐。下面的帖子有一些解释。 stackoverflow.com/questions/2861247/…
很多absolute 元素。此外，如果您不使用媒体查询进行响应式设计，那么永远不要将宽度瞄准超过 960 像素并假设滚动条的宽度。这种设计是terribad。希望您不会为此向任何人收费。

标签： css html center

【解决方案1】：

你的很多 html 元素都有

position: absolute;

这几乎不是一个好主意。

查看此答案了解更多详情：center aligning a fixed position div

【讨论】：

【解决方案2】：

你需要使子元素相对于容器；将以下内容添加到您的包装器中。

position:relative;

【讨论】：

【解决方案3】：

设置 position: relative 现在可以解决问题，但使用绝对定位并不是最好的方法。

我建议尝试使用 Bootstrap (http://getbootstrap.com/) 之类的方法，它使用网格系统处理元素定位，让您可以相当轻松地创建固定或响应式布局。

祝你学习顺利！

【讨论】：

【解决方案4】：

米凯尔，试试这个

我将解释这样做的基本结构。

<header>All your header content should come here</header>
<div id="wrapper">
Container part should come here
</div>
<footer>All your footer content should come here</footer>

您可以使用相同的包装 css（也可用于页眉和页脚，位置固定），但请记住，在编写内部类 css 时，您应该使用poisition:relative, or float 元素。绝对位置并不是一直都很好。你会从W3schools得到定位和浮动的想法

【讨论】：

另外请尽量使包装宽度为标准像素，1270px不是标准宽度。