学步园

在《曾经让人迷糊的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 }

这段CSS实现了层垂直居中于浏览器，如果要让innerBox相对于一个父级层实现垂直居中，只需设置父级层的CSS为：

1 div.outbox {
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}

相应的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>

就目前我使用的情况来看，两种方法都不错，各有用途。两种方法都兼容IE6/IE7/IE8 Beta、Firefox3、Opera9。

好累，虽说是豆腐干文章，但也要花心思在编辑器排版上，还要测试代码正确性，哎，写技术文章真是个体力活。