如何垂直居中div？

【问题标题】：How do vertically center a div?如何垂直居中div？
【发布时间】：2010-12-08 02:37:19
【问题描述】：

我想将我的主要内容 div 垂直居中。我愿意使用 jQuery 和/或 CSS，但我更愿意避免使用额外的包装 div 标签。

我需要做什么？

【问题讨论】：

【解决方案1】：

jQuery：

$(document).ready(function() {
    $('#main').css('position', 'relative');
    $('#main').css('top', (($('#main').parent().height() - $('#main').height()) / 2) + "px");
});

【讨论】：

啊，所以你需要一个包装 div。显然，没有它就没有办法这样做。
父容器的高度应该是多少？
#wrap的高度，你可以调整甚至移除它。

【解决方案2】：

这个问题和this one基本一样，推荐下面这篇文章。

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

【讨论】：

当我查看该页面上的演示时，第一个（“有效”）在我的 Mac 上的 FF 3.6 或 Safari 5 中都不起作用。但是，“最终”确实有效。我没有查看所有的变化。