CSS实现垂直居中小结
2009-715
对于用CSS实现垂直居中有很多种方法，对于标准浏览器的实现方法较为简单、统一，即采用单元格垂直居中的特性：
标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。
这些方法的不同之处在于对IE的实现。主流的方法有两种：
方法一：
非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */
div.greenBorder {border: 1px solid green; background-color: ivory;}
优点：无需定义父元素的高度。
缺点：引入较多额外的标签。
方法二：
元素高度/字体大小的比值为1.14左右时IE可实现垂直居中
.box {
display: table-cell;
vertical-align:middle;
width:200px;
height:200px;
text-align:center;
/* hack for ie */
*display: block;
*font-size: 175px;
/* end */
border: 1px solid #eee;
}
.box img {
vertical-align:middle;
}
优点：没有额外的标签。
缺点：计算font-size的值需要知道父元素的高度。
其实都是根据不同的需求来确定解决方案。相关阅读5还有很多奇怪的方法，有一些是是方法一的变种，没读懂……
补充：
方法二中，当.box为浮动时在FF下将失效，原因不知。
相关阅读：
延伸——水平居中：
Beautiful Horizontally Centered Menus/Tabs/List. No CSS hacks. Full cross-browser.一文中所用到的水平居中的方法和垂直居中方法一的原理类似。在我看来都很有创意，想法很重要。
