<style>
.outerContainer {
    display: table;
    background-color: #fcc;
    height: 300px;
	width: 800px;
}
.innerContainer {
    display: table-cell;
    background-color: #cfc;
    vertical-align: middle;
}
.element {

}
</style>
<!--[if lte IE 7]>
<style>
.outerContainer {
    position: relative;
}
.innerContainer {
    position: absolute;
    top: 50%;
}
.element {
    position: relative;
    top: -50%;
}
</style>
<![endif]-->

<div class="outerContainer">
    <div class="innerContainer">
        <div class="element">
            <p>这是国外比较多使用的方式，多层包裹的方式来实现居中效果</p>
            <p>首先通过 table 方式完成 HTML5 风格上下居中效果，这个很简单</p>
            <p>然后通过 IE 兼容方式，以 innerContainer、outerContainer、element 
            三层结构去处理</p>
        </div>
    </div>
</div>

<div>
    <p>在现代浏览器(IE 8+)下就是通过 table-cell 实现的上下居中，</p>
    <p>而在 IE 7 中形成上下居中的关键是:</p>
    <ul>
        <li>outerContainer 的高度
        <li>各个 position 的设置
    </ul>
</div>