用CSS实现层的垂直居中
在《曾经让人迷糊的WEB兼容问题回顾》一文中曾经提到一种方法，即“通过使用百分比绝对定位,与外补丁负值的方法，负值的大小为其自身宽度高度的一半”达到让层垂直居中的效果。
1 div.innerbox {
2 position:absolute;
3 top:50%;
4 left:50%;
5 margin:-100px 0 0 -100px;
6 width:200px;
7 height:200px;
8 border:1px solid red
9 }
2 position:absolute;
3 top:50%;
4 left:50%;
5 margin:-100px 0 0 -100px;
6 width:200px;
7 height:200px;
8 border:1px solid red
9 }
这段CSS实现了层垂直居中于浏览器，如果要让innerBox相对于一个父级层实现垂直居中，只需设置父级层的CSS为：
1 div.outbox {
2 width:400px;
3 height:400px;
4 border:1px solid #f00;
5 position:relative
6 }
2 width:400px;
3 height:400px;
4 border:1px solid #f00;
5 position:relative
6 }
然而“负值的大小为其自身宽度高度的一半”这个原理却制约了其实际应用面。innerBox的margin与width、height之间的制约关系，使得动态变化innerBox的内容引起的高度变化没办法反应到margin上，除非使用JS动态控制，抛开JS不说，这种原理实现的垂直居中只能用于innerBox的高宽属性为固定值的情况。如果要实现innerBox的内容动态变化也能保持垂直居中，则要用下面的方法：
1 .outBox2 {display: table; height: 400px; width:600px; #position: relative; overflow: hidden;background:#FFCCCC; border: 1px solid #d00;}
2 .midBox2 {#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;}
3 .innBox2 {#position: relative; #top: -50%; width:300px; margin:0 auto}
2 .midBox2 {#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;}
3 .innBox2 {#position: relative; #top: -50%; width:300px; margin:0 auto}
相应的Html结构如下：
1 <div class="outBox2">
2 <div class="midBox2">
3 <div class="innBox2" style="border:1px solid #c00">
4 垂直居中<br>
5 匪夷所思的垂直居中<br>
6 我的博客我做主的居中
7 匪夷所思的垂直居中<br>
8 我的博客我做主的居中
9 </div>
10 </div>
2 <div class="midBox2">
3 <div class="innBox2" style="border:1px solid #c00">
4 垂直居中<br>
5 匪夷所思的垂直居中<br>
6 我的博客我做主的居中
7 匪夷所思的垂直居中<br>
8 我的博客我做主的居中
9 </div>
10 </div>
就目前我使用的情况来看，两种方法都不错，各有用途。两种方法都兼容IE6/IE7/IE8 Beta、Firefox3、Opera9。
好累，虽说是豆腐干文章，但也要花心思在编辑器排版上，还要测试代码正确性，哎，写技术文章真是个体力活。
