html - 垂直+水平居中 DIV 元素的奇怪行为

Question

我正在尝试垂直和水平对齐网页上的 div。这个问题经常被问到，我用谷歌搜索了我所有的问题，但是无论我尝试从其他人那里复制代码，我都无法让我的工作，div 只是漂浮在网站之外的某个地方。据我了解，父 DIV 需要相对定位，子 DIV 需要绝对定位。从 CSS-Tricks 获得以下子 DIV 的内容（负边距正好是高度和宽度的一半）：

width: 850px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -425px;
margin-top: -200px;

检查我的测试站点（jsfiddle）的例子。有谁知道为什么会这样？

Answer 1

摆脱：

margin-top: -200px;
margin-bottom: -200px;

在内容 div 中。你是这个意思吗？

Answer 2

您的容器实际上没有高度

例如看这个

http://jsfiddle.net/7TuVm/3/

我将高度设置为 2000px 你必须向下滚动才能看到你的盒子

height: 2000px;