垂直居中问题解释整理

垂直居中曾经很热的话题，也转过网络一些好的解决方案：

 

 

有关css有趣布局的解答

元素容器内垂直居中问题

 

这次整理一下，并补充解释一下原理

以下内容经过 ie6,7 ,firefox3.5 测试通过

1.定位居中

定位时 left,top百分比相对于包含块的宽度与高度，relative或static的包含块为block或者td的祖先结点absolute的包含块为position不是static的任何祖先结点。

 

标准浏览器用 display:table ，原理同传统的表格布局居中，ie 6，7利用定位来实现，注意

ie 6,7 定位时 top,left 的百分比属性表现并不完全相同，同firefox3.5表现也不相同，体现在父元素没有设置height属性时，三个浏览器布局差异:

postion 差异演示 @ googlecode ,ie6,7不相同

 

 

postion 差异演示2 @ googlecode ,ie6,7相同

 

 

postion 差异演示3 @ googlecode ,ie6,7相同

 

具体为：ie6 一直向上找到有 height 的祖先或者绝对定位祖先 并必要时动态计算高度 ，ie7 一直向上找到 overflow!=visible 的祖先或者有 height 的祖先 或者绝对定位祖先 并必要时动态计算高度 ，如果父亲没有height属性则firefox忽略百分比top。

则 国外高人 利用这点（差异演示3）实现了下列方法 ：

定位居中 演示 @ googlecode

2. inline-block 居中

inline-block 是一个灰暗的领域，但是经过 css geeks 孜孜不倦的研究 ,利用 inline-block hack for ie 以及 vertical-align 属性，达到了各个浏览器上通用的居中效果。

inline-block 居中演示 @ googlecode

3.image 居中

曾经的 taobao ued 考题 ，其实taobao 给出的解法非常不好 ( font-size都用上了 ....)，有兴趣可以看看前面转的文章，img 其实就是一个 display :inline-block 的元素，同 2 的思想，可以达到这个效果，其实就是 inline-block 居中的一个特例

image 居中演示 @ googlecode