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

Question

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

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

查看我的 test site ( jsfiddle ) 例如。有人知道为什么会这样吗？

Answer 1

摆脱:

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

在内容部分。是这个意思吗？