CSS实现不定高内部元素的垂直居中
最近看一篇英文文章，大致内容如下（小女英语欠佳，若有理解欠妥之处忘各位高手指正）：
尽管CSS有垂直属性，但是它不像HTML中Table标签的垂直性一样有效。CSS的垂直属性似乎也不能解决这个问题：
问题的定义：
1、 一个在页面中已知高的区域（如DIV）。
2、 一个内部元素（代表在DIV中的一段长文本）在一个未知高的区域内部（如：它们内容的数据是动态变化的）。
3、 要求它垂直居中在区域中。
4、 不用Table表格。
构想
IE中的主要解决方案：内部的区域元素绝对定位于外部区域元素高的一半。然后它到移到它高的一半位置。在IE中高属性的错误解析需要用一个额外的嵌套DIV属性来解决。
解决像browsers like Mozilla, Opera, Safari等一些标准的浏览器垂直居中的方法又完全不同。将整个顶部的DIV区域的显示模式设为表格 (display:table)，内部的对象视为表格单元格（display:table-cell），而且这里有个小技巧：需要为这个显示元素设置垂直居中属性。
将这再种语法合并，我没有用下划线hack，而是用了#标记，用下划线写的CSS属性能被除开IE7外的所有之前的版本所识别，用#写的CSS属性能被所有IE浏览器识别(包括IE7)，这两种写法都不其它标准浏览器所识别。而下划线hack对本实例实现浏览器兼容似乎也行不能。如果你不想用#标记的方法（建议在CSS中最好不用CSS hack），你可以用下面介绍的方法：
代码
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
2
3 <html>
4 <head>
5 <title>Vertical centering in valid CSS</title>
6 <!--[if lte IE 8>
7 <style type="text/css">
8 #outer {height:400px;overflow:hidden;position:relative;}
9 #middle {position:absolute; top: 50%;}
10 #inner {position:relative; top: -50%}
11 </style>
12 <![endif] -->
13 <style type="text/css">
14 .greenBorder {border: 1px solid green;}
15 #outer{width:100%;height: 400px; display:table;position: static;}
16 #middle{display:table-cell;vertical-align: middle;}
17 </style>
18 </head>
19
20 <body>
21 <h1>Vertical Centering in valid CSS - Example</h1>
22 <div id="outer" class="greenBorder">
23 <div id="middle">
24 <div id="inner" class="greenBorder">
25 any text<br>
26 <b>any height</b><br>
27 any content, for example generated from DB<br>
28 everything is vertically centered<br>
29 </div>
30 </div>
31 </div>
32 </body>
33
实现垂直和水平居中
核心代码基本是相同的，只需要加几条CSS即可。即标准页面代码为：
<style>
#outer {width: 100%;}
#inner {width: 200px; margin-left: auto; margin-right: auto;}
</style>
你可能看到，使用了布局中用得最多的元素水平居中的方法margin-left: auto; margin-right: auto;因为margin在Firefox and Opera中需要空间。因此你需要为# outer DIV高宽，如果你觉得100%不合适你也可以根据自己的需要设定宽度。
如果你使用怪异模式（或兼容模式 见注1）来表现页面（我们都知道页面依赖于文档类型），你需要多加一点点代码，因为怪异模式的IE不支持margin auto,但是有一个好的bug 能替代它：text-align:center,下面这段代码在怪异模式和标准模式下都能有效：
<style>
#outer {width: 100%;}
#middle {width: 100%; text-align: center;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align: left;}
</style>
注释：
IE6.0以后的版本在浏览器内嵌了两种表现模式： Standards Mode（标准模式或Strict Mode）和Quirks mode（怪异模式或兼容模式Compatibility Mode）。在标准模式中，浏览器根据W3C所定的规范来显示页面；而在怪异模式中，页面将以IE5，甚至IE4的显示页面的方式来表现，以保持以前的网 页能正常显示。
对于这两种模式引起最大的问题就是盒模式的问题，或者现在大家已经忽视了IE5的存在，但是，IE在怪异模式运行的盒模式依然在最新版本的IE7保留着，一旦应用不得当，IE7将变成跟IE5一样愚蠢。
