使用 CSS 垂直居中 div

Question

我目前正在开发一个 WordPress 网站，我想在其中使用 CSS 居中换行。我尝试在此网站上实施方法 3，但没有成功。

站点： http://blog.themeforest.net/tutorials/vertical-centering- with-css/

我使用了两个不同的 div，一个的 id 为 floater，另一个的 id 为 page-wrap。我的 css 看起来像这样，

#floater { float: left; height: 50%; margin-bottom: -481px; }

#page-wrap { clear: both; color: white; width: 1594px; height: 962px; margin: auto; position: relative; }

我还想指出，在我的换页 div 内，我有很多其他 div 来构建我的设计（它们也向左和向右浮动），如果这以任何方式影响结果。

链接到 JSFiddle：http://jsfiddle.net/FERNX/

Answer 1

尝试

#floater{
    margin-top: 25%;
}

或

position: absolute;
    top: 50%;
margin-top: -25%;

Answer 2

如果你知道它的高度，最东方、最直接的解决方案是：

#page-wrap { position: absolute; height: 900px; top: 50%; margin-top: -450px; }

基本上它说；将其顶部定位在 50% 处并减去其高度的一半以使 div 的中心居中。