两个解决已知高度的DIV垂直居中的简洁方法

垂直居中问题在CSS领域一直是个大问题，平时撞上一般用两个方法解决，一个是经典解决办法，以2-3个div嵌套，通过position和display属性的控制来实现多浏览器的兼容，还需要一点小小的HACK；另一个方法是大家鄙视的土办法，用table，呵呵，令人反感但是高效，且不必考虑兼容问题，但在某些情况下让人觉得有点傻。

有时候一些工作做久了容易有惯性，忘记了具体问题具体分析，比如在已知高度的情况下，是完全不必使用上面两种方法的，有更简洁的做法：

方法一原文地址：http://www.dezinerfolio.com/2007/05/02/the-simplest-way-to-horizontally-and-vertically-center-a-div

假设你想使一个100×100的DIV垂直居中，思路可以这样的：

.centered_div {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
background: red;
}

注意：该方法在已知高度的情况下基本是完美的，但有个最大的缺陷，就是当浏览器窗体被缩小时，无法出滚动条，或者出滚动条后无法滚动导致内容不可见。所以在某些场合不适宜使用。

方法二原文地址：http://blog.themeforest.net/tutorials/vertical-centering-with-css/ 这里共介绍了解决垂直居中的五个方法的对比。

HTML：

<div id="content">
 Content here Content here Content here Content here Content here</div>

html, body {margin:0; padding:0;height:100%;}
#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;background-color:red;}

这个方法基本没什么缺陷，不存在上面的方法存在的滚动条问题，唯一的缺陷是多了一个标签“floater”。