三议(巧用:before和inline-block伪元素解决)跨浏览器不定长宽，中心为基点，百分比定位～

ie6、ie7支持expression，虽然效率不高，但对于解决一些特别的css布局问题非常有用， 现代浏览器(chrome|firefox|opera|safari等)支持新的盒模型，以及一些非常有用的css属性，而相对于夹在中间的ie8，可谓比较难处理， 幸好ie8相对ie6、ie7支持了一些特性，比如:before/:after伪元素，before可以说是非常有用的伪元素，可以在元素外额外增加一些内容，特别是这些内容是可以使用几乎完整的css属性来定制，即可以当作一个新增的元素来处理。 这里使用before或after伪元素和inline-block结合大小不固定的图片、多行文字的水平垂直居中中

③ display:inline-block和文字大小控制居中

方法来实现简洁而近乎完美的垂直居中。 这里先解释下inline-block的巨大价值，我们布局时常常会使用block布局，即使是a这样的inline元素，由于我们的需要往往会改变它的表现形式，但inline元素对文字的处理丰富的方法确被丢失了，比如vertical-align这样垂直的属性，text-align这样水平的属性，鉴于这些文字的属性往往是自动根据文字的多少计算，但始终会表现得非常理想，但block元素则往往需要固定宽高，才能很好地达到相同效果～所以使用了inline-block表现后，我们可以让元素自身表现为block但在父级容器里定位使用inline的方式～ 但往往对vertical-align这样的似乎“时而可用时而无用“的属性，大家可以参考我对CSS vertical-align的一些理解与认识（一）和css-vertical-align的深入理解（二）之text-top篇两篇很好的文章，这里只使用了vertical-align的middle值。 好了，废话到这， 首先对父元素增加一个before伪类，使之呈现inline-block; 对于相邻的子元素能够表现为inline，使和相邻的元素一起能够影响vertical-align的作用，而内部表现为block则能通过自身的height值设定，控制整个的vertical-align表现值。注意text-align是父元素的属性，而vertical-align是子元素的属性。由于vertical-align默认不是middle，所以如果不对子元素设置vertical-align:middle; 则会发现并未完全垂直居中，而是“底线”居中； 上代码：

此处不定长宽
第二行

此处不定长宽
第二行

既然增加了一个定位用的伪元素，在它影响完相邻元素的定位后就该退出布局舞台了，设置它的宽为0，这样貌似没有问题，但由于高度仍然为100%,在父元素宽变小后，就会发现相邻的子元素被挤出下一行了, 如下演示：

此处不定长宽
第二行

此处不定长宽
第二行

解决方法通过设定负百分百的左右margin，使子元素不换行，但依然影响相邻元素的vertical-align;同时使用expression来增对ie6、ie7的垂直居中 演示如下：

此处不定长宽
第二行

此处不定长宽
第二行

当然如果要保留原本的文本流自动换行的特点可以设定:before伪元素的宽为0，同时使用负margin仅仅抵消:before伪类和相邻子元素之间的空格（浏览器渲染时生成的）。 由于ie8和safari的负margin因为对空格的解析表现似乎有些不同，使用hack来使达到一致：

此处不定长宽
第二行

此处不定长宽
第二行

测试通过：ie6|ie7|ie8|chrome 12.0|safari 5.05|firefox 4|opera 11.11 至此近乎完美的居中就完成了。这样得到了不定长宽的中心基点，再依据再议跨浏览器不定长宽，中心为基点，百分比定位～得得分偏移方法，进行百分比定位就能近乎完美解决了～

此处不定长宽
第二行

此处不定长宽
第二行