使用CSS垂直居中div

Question

我目前正在使用wordpress网站，我希望使用CSS将我的页面包装集中在一起。我试图在这个网站上实施方法3而没有成功。

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

我使用了两个不同的div，一个具有浮点数的id，另一个具有页面包装的id。我的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的中心居中。