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

之前在宽高不定的元素，以中心为原点百分比定位～小议过不定长宽以中心为原点的百分比定位，但需要增加一个额外的标签，作为定位用。 这里不是用额外标签，而使用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来实现垂直居中

代码如下：

此处不定长宽
第二行

测试通过：ie6|ie7|ie8|chrome 12.0|safari 5.05|firefox 4|opera 11.11 实现了居中后，因为子元素是相对定位，对它设定top或left值会基于元素几何中心，如设定left:50%和top:50%后就能看到效果了。代码如下：

此处不定长宽
第二行

然后就可以使用偏移百分比来实现题目所示的跨浏览器、不定长宽、中心为基点、百分比定位了～（囧，题目真够长的） 由于是先居中后偏移，所以要使用50%下的补值的负值，比如要在父容器左上38.2% 38.2%处，则应使用left:-11.8%; top:-11.8%; -(50%-38.2%)=-11.8% 代码如下：

此处不定长宽
第二行