以 CSS 为中心的 div答案

【问题标题】：css centered div以 CSS 为中心的 div
【发布时间】：2010-11-16 08:00:20
【问题描述】：

我的网站上有一个居中的 div，使用固定的宽度和边距：0 auto;

在IE中一切正常，但在FF上，对于内容较长的页面，只有div的顶部有正确的div颜色，其余部分有body背景色。

我做错了什么？

多谢

【问题讨论】：

能否请您发布您的 HTML 和 CSS 代码供我们分析。
溢出的内容是图片还是文字？行为在哪个版本的 FF 上？ Zeldman 在 FF3.5 中遇到了类似的问题：zeldman.com/2009/07/08/firefox-forces-red-background-flash 并且已经打开了一个错误。
已解决。很多人我都在使用最小高度和填充底部。这种组合让我有些头疼。很多人

标签： css html

【解决方案1】：

如果您知道 div 的宽度（即：600px）和高度，则可以使用以下内容。我使用 3 个参数将 div 集中在一个方向上：

水平：

<div class='hcnt'>Some H Centered Text</div>

CSS：

.hcnt{
 left-margin:50%;
 width:600px;
 left:-300px;
}

垂直：

<div class='vcnt'>Some V Centered Text</div>

CSS：

.vcnt{
     top-margin:50%;
     height:400px;
     top:-200px;
    }

两者：

<div class='hcnt vcnt'>Some completely Centered Text</div>

【讨论】：

【解决方案2】：

如果没有看到您的代码，很难判断，但我敢打赌，您已将 div 高度设置为 %100，这意味着 100% 的视口。

即使内容足够长，它也不会超出此范围。这是正确的行为。

要在内容不足时使其达到全屏高度，并在内容过多时超出视口高度，您需要使用两个 div。

这是我主持的一个例子：

【讨论】：