再议跨浏览器不定长宽，中心为基点，百分比定位～

之前在 宽高不定的元素，以中心为原点百分比定位～小议过不定长宽以中心为原点的百分比定位，但需要增加一个额外的标签，作为定位用。 这里不是用额外标签，而使用display:table-cell和expression来实现跨浏览器的不定长宽，中心为基点百分比定位。

注：由于display:table-cell在浏览器渲染时会在没有display:table的父元素情况下生成匿名元素作为布局包裹，而这会造成的问题是子元素无法使用百分比（百分比是相对于父元素来计算的，而display:table-cell如果有了匿名父元素display:table，即会没有position:relative或position:absolute的属性，所以百分比失效） 解决办法：使用新的垂直居中方式—— 巧用:before和inline-block实现垂直居中

首先实现跨浏览器的、长宽不定的、水平垂直居中。

• 父容器text-align:center; 子容器display:inline-block; 实现子元素长宽不定的水平居中，
• 由于ie和ie7对inline-block的支持欠缺，使用*hack和display:inline; zoom:1;触发hasLayout来伪实现inline-block;
• display:table-cell; vertical-align:middle; 来实现现代浏览器的垂直居中，
• 由于ie6和ie7不支持display:table-cell;但在标准doctype模式下，支持expression，所以使用expression设定marginTop值为(父容器高度-子元素高度)/2来实现垂直居中

代码如下：

此处不定长宽
第二行

转载于:https://www.cnblogs.com/defims/archive/2011/06/18/2946699.html