10 Dec 2008

使用CSS完美实现垂直居中的方法

中)
3.我想让内部的对象在容器内垂直居中。
4.不使用HTML的表格(table元素)，也不使用Javascript。 

该CSS垂直居中的方法:

最大的问题:IE浏览器的Bug。

　　大部分浏览器能理解CSS中的display:table之类的表格方式声明，但IE7及其以下的旧版IE无法理解这个声明。

解决办法:让大部分能理解display:table声明的浏览器使用vertical-align属性达到垂直居中，让IE7及以下版本用自己理解高度的Bug来解决居中问题。

IE Bug:　

IE7及以下版本理解高度的Bug:如果a容器内有b对象，a容器并没有设置高度值，如果b对象有实际内容(如文字)，那么就会将a的高度理解为与b相等。那么如果对b采取相对定位，b就会相对于在a中的原始位置移动(主要利用百分比高度)。

eg:a未定义高度，b的高度为100px，将b相对定位，并设top:-50%

在这种情况下:标准浏览器由于未知a的高度,所以b不动。而IE7及以下版本则会让b相对a的高度(其实等于b的高度)上移50%，也就是50px 。

如何仅让IE7及以下版本理解对它们的声明？

1.Pixy曾发明underscore hack，就是在每个CSS属性前加一个下划线”_”，这个hack是专门针对IE6及以下版本的，也就是说IE7无法理解。如:_position:absolute;  所以这种hack就PASS!
2.在属性前加“#”的声明正好可以仅让IE7及以下版本理解，而其它任何浏览器都无法理解这个”#”，所以”#”后的声明就会被其它浏览器忽略掉。 OK~~就这个！

兼容性:

　　目前为止兼容直到IE8.x的所有IE浏览器、Gecko核心浏览器(Mozilla,Firefox,Netscape 7)、Opera 7、Webkit核心浏览器(Safari及Google Chrome)。

代码:

CSS部分:

#outer {
       display:table;
       height:400px;
       #position:relative;
       overflow:hidden;
}
#middle {
       display:table-cell;
       vertical-align:middle;
       #position:absolute;
       #top:50%;
} 
#inner {
       #position:relative;
       #top:-50%;
} 

XHTML部分:

<div id=”outer”>
    <div id=”middle”>
        <div id=”inner”>
           <!–这里是要垂直居中的内容–>
        
    

预览效果Demo(在Demo源代码中附加了一些用于修饰的CSS声明，大家可以忽略)

经测试，该方法也适用于图片垂直居中，建议大家在使用的时候定义好outer层的宽度。