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

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; 则会发现并未完全垂直居中，而是“底线”居中；上代码：

此处不定长宽
第二行

转载于:https://www.cnblogs.com/defims/archive/2011/06/19/2946700.html