使用 CSS 将整个页面居中答案

【问题标题】：Centering entire page with CSS使用 CSS 将整个页面居中
【发布时间】：2017-09-22 05:29:01
【问题描述】：

我正在尝试仅使用 CSS 将整个页面居中，但事实证明它比我最初预期的要复杂。目前我的代码可以在 IE 中运行，但不能在 Firefox 中进行更改。页面可见here。以下是涉及的代码部分：

#wrap {
    width: 960px;
    margin: 0 auto;
    padding: 6px;
    background: #FFFFFF;
}

我的 HTML 结构是：

<body>
<div id="wrap">
    Gubbins in here.
</div>
</body>

似乎在 Firefox 中，wrap div 之后的所有内容都是在它之外创建的。如果我在包装 div 中添加一个“float:left”，这个问题就解决了，但显然所有东西都向左浮动而不是中心。

任何帮助将不胜感激。

【问题讨论】：

标签： html css

【解决方案1】：

将您的标记更改为

<body>
<div id="wrap">
    Gubbins in here.
</div>
</body>

编辑：查看链接，您已经完成了。您需要添加溢出：自动； #wrap 或在 wrap div 的结束标记之前的末尾添加一个清除 div。

此外，在您的示例页面上，包装 div 缺少其结束标记。

【讨论】：

【解决方案2】：

使用这个 CSS：

body { text-align:center;}
#wrap {text-align:left; margin: 0 auto; width:960px;}

那么，让我们从你的问题中检查一下这个陈述：

wrap div 之后的所有内容都是在它之外创建的

这就是它的工作方式。 不要把任何东西放在你的 wrap div 之外。 把它想象成一个代理体。

【讨论】：

【解决方案3】：

如果您知道页面的宽度 - 并且它是固定的，您可以使用以下方法。

现在，利用可能有负边距的事实......

【讨论】：