CSS 完美简易华丽的垂直居中

支持IE6 7 8，Firefox，Chrome，Opera，Safari 利用了一点float的小技巧

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        html,body{height:100%;margin:0;}
        body{padding:1px;}
        #mid-helper {
            float: left;
            height: 50%;
            margin-bottom: -120px;

            width: 10px; /*测试用，可删除*/
            background-color: orange;  /*测试用，可删除*/
        }
        #mid {
            clear: both;
            height: 240px;

            background-color: #8fbc8f;  /*测试用，可删除*/
            opacity: .7;  /*测试用，可删除*/
            filter:alpha(opacity=70);  /*测试用，可删除*/
        }
    </style>
</head>
<body>

<div id="mid-helper">
</div>
<div id="mid">
    this is the #mid element
</div>

</body>
</html>

预览图：

CSS 完美简易华丽的垂直居中