1 让一些<div>显示成table-cell ，结合vertical-align属性 ，vertical-align作用在一些元素上会表现得可能会匪夷所思
<div id="cell"> <div class="content">Content goes here</div> </div> #cell { display: table-cell; vertical-align: middle; }
2 这个方法会用到一个top设为50%、margin-top设为内容高度的一半、绝对定位的div。这意味着它必须有一个固定的高度，这是在CSS里定义的。因为它的高度固定，你可能想要给它设置overflow:auto;，这样如果内容太多的话就不会溢出而是会出现滚动条了。
<div id="content">Content goes here</div> #content { position: absolute; top: 50%; height: 240px; margin-top: -120px; /* negative half of the height */ }
3 在这个方法中，我们会在内容元素上方插入一个div，这个div会被设置成height:50%;margin-bottom:-contentheight/2，然后内容元素会因为清理浮动而居中了。
使用一个浮动元素然后清理浮动，因为内容元素设置了clear:both;，所以你还可以在它上面放其他元素，即使浏览器缩小居中的内容元素也不会盖住它们
<div id="floater"></div> <div id="content">Content here</div> #floater { float: left; height: 50%; margin-bottom: -120px; } #content { clear: both; height: 240px; position: relative; }
4 这个方式使用一个绝对定位且固定宽高的div，接着这个div被要求拉伸到top:0;bottom:0;，它因为高度被固定而做不到这一点，所以margin:auto;就让它居中了。这个方法类似于常见的使用margin:0 auto;来让块状元素水平居中。
<div id="content">Content here</div> #content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 240px; 70%; }
5 这个方法只会居中一行文字。只需要设置line-height等于目标对象的高度，然后文字就居中了。 只能用在文本上（不能用在块状元素上）
<div id="content">Content here</div> #content { height: 100px; line-height: 100px; }
讲解 ：
如果内容区域是最外层的窗口，在内容垂直居中之前，body和html必须被拉伸到100%的高度。因为padding和margin是不计入高度的，所以我们要把它们设置为零，这样就不会因为margin出现滚动条了。
以上5种方法的，实例
<html> <head> <style> /* 方法1
.father-div{ 500px; height:500px; margin:auto; margin-top:100px; background:red; display: table-cell; vertical-align: middle; font-size:24px; } .son-div{ 200px; height:200px; background:yellow; } */ /* 方法3
#floater { float: left; height: 50%; margin-bottom: -120px; background:red; } #content { clear: both; height: 240px; position: relative; background:yellow; z-index:1; } */ /* 方法4
#content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 240px; 70%; background:red; } */
/* 方法5 */ #content { height: 100px; background:yellow; color:red; line-height: 100px; } </style> </head> <body> <!-- 方法1
<div class="father-div"> <div class="son-div"> </div> </div>
--> <!-- 方法3
<div id="floater"></div> <div id="content">Content here</div>
--> <!-- 方法4
<div id="content">Content here</div>
-->
<!-- 方法5 --> <div id="content">Content here</div> </body> </html>